So I'm trying to make the background image for one of my divs spread the full width of my screen while keeping the content in my div set at a certain width.
I've tried overflow:visible , min-width:100% , max-width:100% and none of these options seem to be working correctly. I'm unsure if it is because I've set the background image by overriding the original through CSS or what.
Since my webpage is not live yet, I've linked an image HERE to help explain.
The place I'm trying to put the rule to make the background image go full width is under #content-core with max-width:100% only to have all of the content go full width instead of just the background image.
Any help would be much appreciated and if you need more information please ask. Thanks!
You'll want to nest your content inside a container div that you'll set to 100%.
.mycontainer {
Width:100%;
}
.mycontent {
Width:80%;
}
If I understood your question right, then are overthinking this,
Simply use a main container with the CSS
background-image: url('example.com/img.png');
attribute and insert a different div in it with your content.
See here
Related
Im trying to build some fancy item grid by using bootstrap and flex. Therefore the item image always has to extend to 100% width of available space by keeping the 1:1 ratio.
http://www.bootply.com/kPLGHtA7Kh
I got it to work by using the css background image. But I struggle to make it look the same by using an img-tag. Im running out of ideas, hope you can help me.
In your CSS just specify the width: 100% on your image and don't touch the height (or set it to auto which is the default).
The parent of your image should also have a position:absolute or position:relative in order for the width to work properly
Demo : http://jsfiddle.net/s3spdy5z/
I think the images are pushing the width of the boxes to the max-width so kind of overriding the flexbox settings. With the background images you basically don't have any content inside them so flexbox can calculate the widths and not worry about content. The images are set to 100% but it thinks you want 100% of the max-width therefore the grid doesn't fit anymore.
If you set width: 33%; on the .flex-item and remove the min and max the grids will look the same.
I'm getting started with responsive design and just built this very basic "responsive" image sequence http://goo.gl/iMGRkL using the img tag.
Now I'm trying to do the same but using background-image instead of the image tag.
Is it possible without Javascript? I tried a few different approaches, including this http://goo.gl/AstSdl, but no luck so far.
Thanks in advance.
If you are using the css property "background" or "background-image", a good way to do it is to give the particular background image a parent such as a header, div, or section. Then you can use the css values "center" to center it in the parent container, and "cover" to make the image cover the parent div container. You can also play around with pixel and percentage values here. Another thing that is very important is to set the background repeat to "no-repeat" in your css so it doesn't repeat. This code will make it so that the image will cover the parent container at any width or height.
ex: background: #ffa949 url('example.jpg') no-repeat center / cover;
After doing that, the image may still looked a bit scrunched so it would probably still be a good idea to add some media queries.
If you go to http://digitaldemo.net/anova/ and resize the browser to make it smaller and then scroll horizontally to the right, you will see that the background now covers the part of the page outside the wdith of the visible screen.
Why is this happening?
Any help would be most appreciated!
Best,
Cynthia
Add this.
#navbar{ min-width: 1100px; }
same to .footer, .wrapper, and .footerbottom
min-width:1100px
The problem is because the #nav element has a hard width of 1100px and a width:100% background on another element is only 100% of the width of the viewable area.
Changing the min-width on the <body> to
body {
min-width: 1100px;
}
will set your minimum page width to be the length of your longest element and therefore the CSS background will extend as it will be 100% of 1100px wide.
For future projects I'd recommend reading responsive web design - one aspect being to design a site will adapt to the available width/height of a device, through a combination of non-fixed dimensions on elements and/or CSS Media queries.
I just debugged your code and found out the issue. The issue is you are using overflow:hidden property. It is causing problem. like in class (.masthead) you apply this. Just remove it. then it is visible.
Is there a way to make an image repeat beyond the element div that it is placed in? When the browser is maximized, the picture will stop where the footer stops but I'd like to repeat to the max height of the browser. Possible without putting the image in the body bg? I can't place it in the body bg because of a jquery animation, and IE gradient code and an image can't be put together. Thanks.
-edit- found the solution
background image vertical repeat for a div
set the html and body in css with height:100%;
and also height:100%; in the div with image
worked because the div with the image was the first div before the reset of the content div
You cannot have images repeat outside of the parent div size in such a way that is still cross-browser compatible as far as I know.
I have made a little gallery (http://www.kongeboa.dk/billeder/3/Coco/)
If you refresh, and choose to view one of the other thumbnails below the actualy image, you will see that the image resizes randomly...
I have a width on the image tag set to 100%
I am sure, that all the images has a size of 460px to fill the width of the design.
When all thumbnails have been viewed, the big image shows in the correct size (460px)
The problem happens in Safari and Chrome. OSX and Windows.
I have no idea why this happens, and i dont know how to debug it...
In short: remove float: left; from the '.image' style.
Since the '.image' style makes the div containing the image float left, the 100% is relative to the size of a div which sizes to fit the image, so you'll probably get variable results in different browsers. If you remove the float: left; from the '.image' style, it'll fill 100% of the width, and the image will in turn fit 100% of its width, and everything should be grand.
You should remove float: left from .image.
It's some kind of WebKit bug from some combination of width="100%", the shrink-wrapping behaviour of float: left, and image caching.
Live Demo - (check it in Chrome, you'll see the image is full width)
If you know they've all got a width of 460px why not set width="460"? As far as I can recall percentages for img.width are not part of the HTML spec.
If you want to make sure the image always fills its container, then what you want is the CSS style width:100%.
I give it a try...
Remove width="100%" from the img-tag and remove width:100%; from the .img class. Not sure if that solution would work for you?