Is there a way of having one image (PNG or SVG) as a background for multiple divs? Please see the images below as to how it would work. Also when the screen width becomes smaller and the divs line up below each other, would there be a way of changing the background to match that aswell?
DIVs without background:
The background:
DIVs with background:
Using background-attachment: fixed will give you the desired effect. You just need to make sure your background image works within the bounds of the div or else you will get tiling which can be turned off with background-repeat: none
.border {
border: 1px solid #000;
position: absolute;
}
div {
background-image: url("https://dummyimage.com/500x250/000/fff.png");
background-attachment: fixed;
}
<div id="div1" class="border" style="height:100px;width:200px"></div>
<div id="div2" class="border" style="left:225px;height:100px;width:200px"></div>
<div id="div3" class="border" style="top: 125px;height:100px;width:225px"></div>
<div id="div4" class="border" style="left:250px;top:125px;height:100px;width:175px"></div>
You might be looking for background-attachment: fixed:
If a background-image is specified, the background-attachment CSS
property determines whether that image's position is fixed within the
viewport, or scrolls along with its containing block.
.container {
background-color: gray;
}
.window {
background-image: url("https://i.stack.imgur.com/RPBBs.jpg");
background-attachment: fixed;
display: inline-block;
}
<div class="container">
<div class="window" style="width: 100px; height: 50px; margin: 20px;"></div>
<div class="window" style="width: 200px; height: 50px; margin: 20px;"></div>
<div class="window" style="width: 500px; height: 50px; margin: 20px;"></div>
</div>
How's it going? I'm still relatively new to HTML and CSS, but I think we can tackle this one together!
Your "WHOLE" picture might exist in a that contains the other "WINDOW" elements...where each of the window elements is positioned relative to the parent div that contains the whole picture
.whole{
position:relative;
}
.UpperL{
position: absolute;
height: 25px;
width: 100px;
}
.UpperR{
position:...;
}
.LowerL{
position:...;
}
.LowerR{
position:...;
}
<div class="whole" img src="whole picture.png">
<!-- let the whole class contain the background image-->
<div class="UpperL"> Upper Left Window</div>
<div class="UpperR"> Upper Left Window</div>
<div class="LowerL"> Upper Left Window</div>
<div class="LowerR"> Upper Left Window</div>
</div>
The code doesn't run well yet, but the point of setting four windows inside of a fifth window is to give the four an ability or property to see through the fifth;
If your parent contains the image, but is still colored all white (opacity at 100%), the four window elements should be able to see through the opacity of the fifth window (turning their opacity down to reveal the image).
hmm...
I'm having a problem that once I use jQuery's .html() to insert a paragraph into a nested div. It's causing it to float outside of it's containing div. I've tried playing with the margins and padding of both divs but to no avail. I'm new to javascript/jQuery and would really like to understand why this is happening. Thanks for the help in advance.
Here's a screenshot link:
Here's my html:
<div class="selectHero">
<div id="ironMan"></div>
<div id="capAmerica"></div>
<div id="thor"></div>
<div id="winterSoldier"></div>
</div>
Here's my javascript:
$('#ironMan').html("<p>IronMan</p>"+"<p> health: "+ironMan.health+"</p>");
Here's my css:
.selectHero {
max-height: 250px;
max-width: 900px;
}
#ironMan {
background-image: url("../images/ironMan.jpg");
background-size: cover;
height: 200px;
width: 200px;
display: inline-block;
text-align: center;
color: white;
font-size: 26px;
}
Try using background-size property. I guess similar question is posted here -
Fit background image to div
I want to know that is there any way to resizes the img tag image without using media queries. I searched for it and tried all the answers but nothing worked for me. When I see the screen in windows system it shows the normal one screen display, when I see on normal screen laptop and macbook pro 13 inch it scrolls and when I reduce the window size to 75% in chrome it fits the one screen layout.
I tried to reduce the font-size for eg: font-size:2vw; Its working fine but i tried CSS:
max-width: 100%;
width: auto\9; /* ie8 */
height: auto;
not working.
Is there any way or any script to make the layout in one screen and resize the image tag automatically. I don't want to use media queries
Just add the "width:100%"
e.g.
<img src="http://dummyimage.com/1200x400/000/fff" style="width:100%"/>
If you are looking for anything else. please edit the question and add the screenshots.
UPDATED
Try this:
#images{
max-width:50%;
border:1px solid;
float:left
}
#images .image{
float:left;
padding:10px;
width:25%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}
<div id="images">
<div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div>
<div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div>
<div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div>
<div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div>
</div>
Hope it works for you.
Please add width:100% and height auto properties to img tag so that it will be responsive.
eg:
img{
width:100%;
height:auto;
}
Make image responsive without media queries:
img {
width: 100%;
height: auto;
}
<img src="http://lorempixel.com/400/300" alt="">
To make image responsive and no scrollbars:
html, body { height: 100%; margin: 0; padding: 0; }
img {
width: 100%;
height: 100%;
display: block;
}
<img src="http://lorempixel.com/400/300" alt="">
Make image responsive with constraints:
img {
width: 100%;
height: auto;
max-width: 500px;
}
<img src="http://lorempixel.com/400/300" alt="">
I want to overlay the background image of a parent div over the content of its children.
What I have in essence is simple:
<div> <!-- has BGImage -->
<div>
<div>
<iframe /> <!-- serves content that needs to be interacted with -->
</div>
</div>
</div>
The top parent div has a background image (a silhouette of an ipad) and the content in the iframe is a page serving JQuery Mobile content (it is a mobile preview). I can't have another parent div with absolute positioning using z-index because the content in the iframe must remain fully usable and click-able.
The reason I need this is that the inside edge of the tablet silhouette has a transparent inner border, I need this to soften the edges of the served iframe content.
I hope this is achievable, I put the JavaScript and JQuery tags in the question because I am not shy to using if they need to be, but as always, if I can complete this using CSS then I am all for that.
Mock up JS fiddle basically showing what I have: http://jsfiddle.net/fQ22A/1/
The following image is where I am wanting to go based on the JSFiddle above:
Not the way you wanted but your purpose is solved here. http://jsfiddle.net/fQ22A/5/
Full Screen: http://jsfiddle.net/fQ22A/5/embedded/result/
HTML:
<div id="finalCont2">
<div id="insidewrapper2">
<div id="outsidewrapper2">
<div class="fullheight2">
<iframe id="template_preview_iframe" src="http://www.w3schools.com" width="770" height="1024"></iframe>
</div>
</div>
</div>
</div>
CSS:
#insidewrapper2{
background-image:url("http://desktop.ly/images/devices/ipad_mini_black.png");
background-repeat: no-repeat;
display: block;
height: 1289px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
width: 870px;
}
#outsidewrapper2{
position: relative;
}
.fullheight2{
padding-top:133px;
}
#template_preview_iframe{
overflow:hidden;
display:block;
border:none;
margin:0 auto;
}
You can't do that.
...but you can get something close to what I guess your want using a box-shadow inner.
EDIT:
body{border:none;box-shadow: inset 0 0 10px #000;}
http://jsfiddle.net/rwA2f/1/
This could be something closer to what you are actually after:
Demo: http://jsfiddle.net/abhitalks/ZVEug/2/
Full Screen: http://jsfiddle.net/abhitalks/ZVEug/2/embedded/result/
You need to position the iframe inside your div using positioning. Here is a simple markup to give you the idea:
HTML:
<div class="outer">
<iframe src="..." />
</div>
CSS:
div.outer {
width: 320px;
height: 320px;
background: url('...') no-repeat top left;
background-size: 100%;
position: relative;
}
iframe {
border: none;
width: 250px;
height: 220px;
position: absolute;
top: 48px; left: 32px;
border-radius: 10px;
box-shadow: 0 0 30px #fff;
opacity: 0.6;
}
The trick is to use a combination of box-shadow with opacity to give the illusion of soft edges and also meets your requirement of the background peeping through at the same time the iframe contents are usable.
Please notice how the background's reflection (diagonal glass reflection) is visible through the iframe contents.
I have large images of varying dimensions that need to completely fill 240px by 300px containers in both dimensions. Here is what I got right now, which only works for one dimension:
http://jsfiddle.net/HsE6H/
HTML
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
max-width: 100%;
height: auto;
}
The proportions should stay the same. Essentially, wide images should be cut off in width, while high images need to be cut off in height. So just zooming in as much as is needed to fill the container.
Not sure why I can't get it to work, do I need JavaScript for this?
Edit: To be clear. I need everything red on the fiddle gone. The images coming in are dynamic, therefore I can't use background-images. I'm open to using JavaScript. Thanks! :)
Auto-sizing Images to Fit a Div - Making the CSS Work
Here is one way of doing it, start with the following HTML:
<div class="container portrait">
<h4>Portrait Style</h4>
<img src="http://placekitten.com/150/300">
</div>
and the CSS:
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
.container img {
display: block;
}
.portrait img {
width: 100%;
}
.landscape img {
height: 100%;
}
and the demo fiddle: http://jsfiddle.net/audetwebdesign/QEpJH/
When you have an image oriented as a portrait, you need to scale the width to 100%. Conversely, when the image is landscape oriented, you need to scale the height.
Unfortunately, there is no combination of selectors in CSS that targets the aspect ratio of the image, so you can't use CSS to pick out the correct scaling.
In addition, you have no easy way of centering the image since the top left corner of the image is pinned to the top left corner of the containing block.
jQuery Helper
You can use the following jQuery action to determine which class to set based
on the aspect ratio of the image.
$(".container").each(function(){
// Uncomment the following if you need to make this dynamic
//var refH = $(this).height();
//var refW = $(this).width();
//var refRatio = refW/refH;
// Hard coded value...
var refRatio = 240/300;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ( (imgW/imgH) < refRatio ) {
$(this).addClass("portrait");
} else {
$(this).addClass("landscape");
}
})
For each image in .container, get the height and width, test if width<height and then set the appropriate class.
Also, I added a check to take into account the aspect ratio of the containing block.
Before, I had implicitly assumed a square view panel.
For anyone looking to do this that doesn't have dynamic images, here's an all-CSS solution using background-image.
<div class="container"
style="background-image: url('http://placehold.it/300x1500');
background-size: cover; background-position: center;">
</div>
<div class="container"
style="background-image: url('http://placehold.it/1500x300');
background-size: cover; background-position: center;">
</div>
The "background-size: cover" makes it so that the image scales to cover all of the div while maintaining the aspect ratio. The CSS could also be moved to a CSS file. Although if it's dynamically generated, the background-image property will have to stay in the style attribute.
Taking out the line: max-width:100% in your CSS file seems to do the trick.
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
height: auto;
}
Also you can add > to your closing div in your HTML file could make the code neater.
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div>
Here is a working JSFiddle link: http://jsfiddle.net/HsE6H/19/
Here is another solution I found, that no need to seperate portraid or landscape or scripting.
<div class="container">
<img src="http://placehold.it/500x500" class="pic" />
</div>
CSS
.container{
position: relative;
width: 500px;
height: 300px;
margin-top: 30px;
background: #4477bb;
}
.pic{
max-width: 100%;
width: auto;
max-height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Here it is, it works well...
https://jsfiddle.net/efirat/17bopn2q/2/
Background can do this
set image as background
2.
div {
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
or
div {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You should try this:
img {
min-width:100%;
min-height:100%;
}
I used this plugin that accounts for any ratio. It also requires imagesloaded plugin to work. This would be useful for numerous images across a site needing this treatment. Simple to initiate too.
https://github.com/johnpolacek/imagefill.js/
It works if you add the following to the parent div for img styling;
https://jsfiddle.net/yrrncees/10/
.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}
This could do the job:
.container {
float: left;
height: 300px;
width: 240px;
background-color: red;
margin: 20px;
}
img {
width:240px;
height:300px;
}
We went down the path with an Angular app of using a variation on the jQuery approach above. Then one of our bright colleagues came up with a pure CSS approach. See this example here: https://jsfiddle.net/jeffturner/yrrncees/1/.
Basically using line-height solved the problem for us. For those not wanting to hit the fiddle, the code fragments are:
.container {
margin: 10px;
width: 125px;
height: 125px;
line-height: 115px;
text-align: center;
border: 1px solid red;
}
.resize_fit_center {
max-width:100%;
max-height:100%;
vertical-align: middle;
}
The key is in using line-height and setting the container to do the same.
I came across this topic because I was trying to solve a similar problem. Then a lightbulb went off in my head and I couldn't believe it worked because it was so simple and so obvious.
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
min-width:100%;
min-height:100%;
}
Just set the min-width and min-height to 100% and it will always automatically resize to fit the div, cutting off the excess image. No muss no fuss.
Using an image as Div background has many disadvantages (like missing ALT for SEO). Instead of it, use object-fit: cover; in the image tag style!
The following solution is very short and clean if you need to insert img tag into div tag:
.container, .container img
{
max-height: 300px;
max-width: 240px;
}
Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>
Also, if you don't need to use a div you can just write an even shorter css:
img
{
max-height: 300px;
max-width: 240px;
}