So i'm trying to use an img tag to make a background img in html/css but my img tag will not allow things to overlap it and when I try to use a div class element it does not stretch to edge of page even with width at 100%. here is my css and html.
.backgroundImage {
background: url(/images/mainBackground.jpeg) top no-repeat;
width: 100%;
height: auto;
position: relative;
z-index: 0;
margin: 0 auto;
}
.img{
z-index:0;
}
.img-responsive{
height:auto;
width:100%
}
These are the two ways I've tried:
<img src="../images/mainBackground.jpeg" class="shadow-offset img-responsive"/>
<div class="backgroundImage">
The div ending after everything but my footer
I have containers but neither of these are inside any containers either because they start at the top of the page before I use containers at all.
wrap all of your html in a <html> tag, then use the following css:
html {
background-image: url("image/url.png");
}
I'm going to assume all you're trying to do is add a background image to your div - your explanation is a little unclear. The following is all you'll need:
// html
<div class="backgroundImage">...</div>
// css
.backgroundImage {
background-image: url('/images/mainBackground.jpeg');
background-repeat: no-repeat;
background-size: cover;
}
div elements are display:block by default, which means it should be 100% width. Unless there's something in your markup you're not showing us, there's no need to add width: 100%. Also, the div will also automatically change height based on its content. In this case, using background-size:cover will allow the background image to resize and fill the div regardless of size.
Unless... you're floating things inside the div. Then you're going to need a clear, like this:
// html
<div class="backgroundImage clear">...</div>
// css
.clear::after {
content: '';
display: table;
clear: both;
}
Related
I'm trying to learn the basic mechanics that explain why it takes 3 height: 100% tags to fill the screen with a background image. Intuitively I understand why .bg needs height: 100% or alternately height: 100vh;However I don't understand why the BODY tag needs height: 100% and I especially don't understand why the HTML tag also needs it. If any one of these 3 lines is deleted the effect stops working. Is there something in the spec that explains this? I can't find it.
Here is my Fiddle
html {
height: 100%;
}
body {
height: 100%;
margin:0;
padding:0;
}
.bg {
height: 100%;
background-image: url(https://placehold.it/600x600);
background-position: center;
background-size: cover;
}
<div class="bg">
</div>
The .bg div is inside both the body and the html tags. Since it's height:100% fills its parent's height, the parent tags, html and body must also be the full height:100%. If they are not then even though the .bg div is filling height:100%, that 100% comes from a parent which is not the full screen height, so .bg is only able to fill whatever the parent's height was.
I have a div with a background-image assigned in the CSS3 file.
The image is responsive, so it scales according to the screen size BUT the container keeps the height at all screen sizes.
I need to know if there is a way to make the container responsive as well as the background image.
HTML:
<div class="responsive> </div>
CSS3:
.responsive {
background: url('https://s20.postimg.org/o09gf7fvx/bag.jpg') no-repeat center top;
border: 1px solid red;
background-size: contain;
width: 100%;
height: 270px;
}
I must use background-image selector and no img src tag.
Here is the fiddle file.
Thank you.
Update - February 3rd, 2021
Since I wrote the original answer a new CSS property has been introduced - 'aspect-ratio' - to solve this problem.
<div id="responsive">some text</div>
CSS:
#container {
width: 100%;
background: hotpink;
aspect-ratio: 100 / 29;
}
At the time of writing this CSS property doesn't yet have widespread browser support.
Working Example: https://jsfiddle.net/fu0nL57t/
Ref: https://web.dev/aspect-ratio/
=====================================================
Original Answer
This can be done an additional dummy element, inside the element you want to keep at a fixed ratio. If you specify a padding-top or padding-bottom as a percentage, that is in terms of the width of the container element, and this then keeps the height of the container element at a fixed ratio.
<div id="responsive">
some text
<div id="dummy"></div>
</div>
CSS:
#responsive {
display: inline-block;
position: relative;
width: 100%;
background: url('https://s20.postimg.org/o09gf7fvx/bag.jpg') no-repeat center top;
background-size: contain;
}
#dummy {
padding-top: 29%;
}
Working Example:
https://jsfiddle.net/098jj61q/
Credits:
http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio
http://alistapart.com/article/creating-intrinsic-ratios-for-video
Yes its correct. According to #Paulie_D, you can't do that with background image.As per your requirement you can do that using img tag only.
What you have to do, without using the div just make the image responsive by treating it as a block element as,
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
or if you insist to use division with background image then cover the backgound image and set min-height as,
div.mydiv {
background:url(background_image.jpg);
background-repeat:no-repeat !important;
background-size: cover !important;
background-position:center center !important;
min-height:300px;
}
When I set the background image at I have to give it a static size of div otherwise it will not display the background images. What is problem.....
I have this CSS:
.wrapper {
width: 1170px;
margin: 0 auto;
height: auto !important;
}
.main_div {
float: left;
width: 100%;
height: auto !important;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
width: 100%;
height: auto !important;
}
.header {
width: 100%;
background-image:url(file:///D|/HJ/ALL%20HTML%20TEMP/bootstrap/bootstrap/img/header_bg.jpg);
float:left;
}
The first comment is correct, I decided to create a little demo to explain this.
So if you take a look at the demo you can see we have the first div using background to place an image. This is fine and valid CSS but without a height and width how can the background be displayed?
Moving onto the second div, here we give the div with the background and height/width. Now the background has appeared. Because we have defined the height and width the background has room to display. A background cannot tell the element to be a certain size without you defining it.
And the last div, this has <img> inside of it. As this is an block element it has a height and width, so it will show the image as the parent has no height or width and therefore will allow the image to expand inside of it.
HTML:
With no height:
<div class="image"></div>With height:
<div class="imageWH"></div>With img:
<div class="imageIMG">
<img src="http://placehold.it/350x150" alt="" />
</div>
CSS:
.image {
background: url(http://placehold.it/350x150) no-repeat;
}
.imageWH {
background: url(http://placehold.it/350x150) no-repeat;
width: 350px;
height: 150px;
}
.imageIMG {
<!-- No need for anything -->
}
DEMO HERE
Why do you float the .main_div with width:100%? Floated elements get out of the flow which means they don't stretch their parent elements, so a background set on .main_div's parent won't show.
You should either remove the float or add some clearing technique to the header (also known as a css clearfix). See demonstration here: http://jsfiddle.net/YLEgY/1/
Edit 2: It seems clear that no one seems to be able to understand what I'm asking, so I'll try to illustrate it;
The area in the center has the id #navigation. This has the following CSS properties,
width: 960px;
margin: auto;
background: #e4bd04;
The reason it has a width of 960px, is because I would like the links in my navigational bar to remain within a 960px limit. I'd also like them centered, so I apply margin: auto. However, this means that my background only flows for 960px. I'd like the background to flow for the entire window width (100% of page), so that users with larger screens don't end a huge chunk of white space at the top.
In order to prevent this, I nest #navigation into another id, #navouter, to which I apply width: 100%; and background: #e4bd04;, so that the background now appears to extend for the entire width of the window.
Is there any way to do this without using two elements as I've done?
I've undestood, you don't want to have 2 div to center another div with fixed width, isn't it ?
I don't think that you'll love it, but this is a solution :
.nav {
width:960px;
position:absolute;
left:50%;
margin-left:-480px; // width / 2
}
<body>
<div class="nav">Test content</div>
</body>
Result for 300px div : http://jsfiddle.net/7GTCc/1/
Or another, really ugly (lol) :
.nav {width:960px;}
<center>
<div class="nav">Test content</div>
</center>
Edit regarding your illustration
"Is there any way to do this without using two elements as I've done?"
No :-)
But if you only want the background to be 100%, don't specify a background (color or url) to your #navigation.
Last try to answer, test this :
#navigation {
min-width:960px;
text-align:center;
}
Demo here : http://jsfiddle.net/7GTCc/3/
you could use min-width property , dont know what exactly you are looking for
<div style="min-width:960px; width:100%"></div?
Yes, this is easy to do without additional markup. Use the ::before pseudo-element for the expanding part of the navigation.
Demo: http://jsfiddle.net/ThinkingStiff/eAf7w/
HTML:
<div id="nav">navigation</div>
CSS:
#nav {
background: #6D7B8D;
height: 40px;
margin: 0 auto;
width: 400px;
}
#nav::before {
background-color: lightblue;
content: '\00a0';
display: block;
height: 40px;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
Sorry but I can't get this to work. Should be a quick answer.
My html is laid out like so:
<html>
<header>
...
</header>
<body>
<div class = "background"></div>
<div class = "content">
...
</div>
<body>
</html>
The I want the background div to simply place a 1000px background colour down the entire length of the page. The content is then padded 40px on each side, inside this background colour.
The css is like so:
body {
width:1000px;
margin-left:auto;
margin-right:auto;
}
.background {
position:absolute;
top:0px;
width:1000px;
height:100%;
}
.content {
min-height:100%;
padding-left:40px;
padding-right:40px;
}
I thought it worked like so... The body div would expand to hold the min-height of the .content div. This means that 100% height of the .background div would fill the entire body and so the length of the page. However it does not. It only fills the window height. Where am I going wrong?
Thanks
As topek guessed, this will do it:
html, body{
height:100%
}
The reason this works is because percentage CSS heights only work if the parent element has a height defined on it. By adding the above, you're giving .background's parents a height.
Update: based on OP's comment, here's how you would get the .background div to always appear to fill the viewport:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
/* Fixed element that takes up entire viewport */
.background {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Content that stacks above .background */
.content {
position: relative;
z-index: 2;
}
As .content grows larger than the viewport and the user scrolls, the fixed position of .background will keep it always in view.
And of course, a handy example.
All you need is:
body, html {
height:100%
}
Then specify height:100%; any DIV you want to have full height.
BTW - 1000px wide is a bad unit to use. People with 1024 wide screens will get horizontal scrollbars. Better to stick to 980 or less. 960 is good because it can be divided by many factors.
I think this is what you're looking for.
http://jsfiddle.net/sg3s/GxRcp/
The key in this little example is the position: fixed; for .background so that it is kept in the screen while scrolling.
If you don't really want to do this and want the background to expand ARROUND the content just make it a normal / relatively positioned element, and wrap it arround .content...
If you give a more acurate description of the layout you're trying to create (and maybe why in such a way) we may be able to help you better.
Btw, in your example html there is an error, header should be head.
You should put bg into html or body elements as the first choices.
html { background: url("bg.jpg") no-repeat top center; }
or
body { background: url("bg.jpg") no-repeat top center; }
Fixed:
background: url("bg.jpg") no-repeat top center fixed; /* And bg will stay in fixed position */