I am trying to create an full width image above my nav bar, but I cant even get the image to show on screen. Here is my simple HTML:
<html>
<body>
<div class="wrapper" />
</body>
</html>
And the css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 100%;
}
I see the jpg made it to my browser and can click on it in my resources, so there is no problem with the path. The screen is still blank and showing nothing. Any help would be awesome.
This is because height:100% is functionally useless, and your div resultingly has no height.
If you give the div a fixed height, the image should appear as expected.
Alternatively if you want the background image to apply to the background of the page, you can apply it to the <html> element and avoid the whole wrapper, 100% debacle.
html {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
http://jsfiddle.net/dolours/JcxLm/2/ Give a specific height, Height 100% is meaningless
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 50px;
}
try this <div class="wrapper"></div>
It is possible that the image isn't showing because there is no content within the div and therefore it's size is 0. Try setting the width and height to a set size, something like 200px to test out this theory. Also I would change your code to:
<div class="wrapper"> </div>
you can use css for body tag, the css of body will be like this:
body{
background: url(../assets/bridge.jpg) center top no-repeat;
}
i think it will work for you, if you want just background image.
Related
I have made two forms on my website, both being surrounded by one <div class="wrapper"> tag. I used CSS to add a background image to this.
.wrapper {
background-image: url(../images/backgrounds/desktop.jpg);
background-size: 100%;
background-position: top;
width: 100%;
height: 100%;
min-width: 950px;
}
However, this is what the site actually looks like. I can't extend the bottom of the image to fill the screen. I can't figure out why it's doing this.
The height of div is 100% of what? If it is a direct child of body, the body is not wrapping 100% of the screen by default. So you have to make body 100% and then the wrapper will also take 100% of body. If there are more parent elements, all of them also should have style height:100% :
html,body{
height:100%;
}
Also add background-size:cover to make sure that the image stretch enough to cover the whole screen.
Add background-size:cover to have the background cover the entire div. Your background will only show behind the content contained within it. You need to change the height or padding of your container and/or add more content to see the whole background.
.wrapper {
background-image: url(../images/backgrounds/desktop.jpg);
background-size: 100%;
background-position: top;
background-size:cover;
width: 100%;
height: 100vh;
min-width: 950px;
}
My solution was to set the height of the <div class="wrapper"> to 100vh.
.wrapper {
height: 100vh;
}
This set the height of the divider to 100% of the window view height. Before it was going to 100% of the height of the forms.
Try replacing
background-image: url(../images/backgrounds/desktop.jpg);
with
background:url(../images/backgrounds/desktop.jpg) no-repeat scroll;
I need your help with a site i'm putting together. I'm a noob and have been given a design that has the body with designed to 900px wide but they have given me an image that is 1200px wide. They want the image to span the full 1200px wide, so essentially there will be 300px overlap on either side of the page. I can't quite figure out how to do this, any help would be appreciated!
Thanks,
Dave
Your best bet to accomplish what they want is to make the image a background-image in CSS.
Set up a div that will contain the image (as a background), and position it on the page relative to where you want it to be.
<div class="background"></div>`
Either fill the div with content to give it a height or define a fixed height, say 400px.
<style>
.background {
height: 400px;
width: 100%;
}
</style>
Now, set the background properties to achieve what you want.
<style>
.background {
height: 400px;
width: 100%;
background-repeat: no-repeat;
background-image: url(URL_TO_IMG);
background-position: center center;
background-size: cover;
}
</style>
JSFiddle example here:
jsfiddle
You can use this code:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
to cover the exact space you have.
body{
background: #ccc url(image_folder/image_name.extension) np-repeat 0 0 center;
}
#otherelement{
/*Style Your Page Whatever you want...*/
}
I am quite new to html and CSS, my problem is that each time I post a header image on my HTML file it doesn't fit across the screen. I try width: 100%; but then it messes up the resolution. Here is my current code:
HTML -
<div id="header">
<h1><img src="images/headings/titleheader.png"
width="800" height="150" alt="Munsterberg Designs" border="0" /></h1>
</div>
CSS -
#header {
height: 150px;
background: black;
url(../images/headings/titleheader.png);
}
Is there a way to take my image that is 760x150 to fit across the screen no matter the resolution of someones monitor?
<img> is HTML tag for placing an image into your HTML page/document
"background-image" is a CSS property. You place an image as background into a <div> for eg. not into a <img>
They are COMPLETELY different. Don't confuse both!
If you want the image as 100% width you should put it as 100% at image and header both, and remove "height" property, that's what is breaking the resolution:
#header{
width:100%; /* put header as 100% */
}
#header img
{
width:100%; /* put header's image as 100% */
}
<div id="header">
<h1>
<img src="images/headings/titleheader.png" alt="Munsterberg Designs" border="0" />
</h1>
</div>
If you see, I'm not using "background" or "background-image" because I don't want a background image , I have the actual image at <img> HTML tag
Now if you want the background css approach check for #mdesdev answer and remove <img> tag from your HTML document, you need to choose only one way.
<div id="header">
</div>
#header {
height: 150px;
width: 960px; /* For demo purpose */
background: #000 url(../images/headings/titleheader.png) no-repeat;
background-size: cover;
}
You do not need to add the image within the div in the HTML.
<div id="header></div>
In the CSS, indicate the height and width. To get it to fill the entire width, try using background-size: cover
#header { height: 150px;
background: black url("../images/headings/titleHeader.png") no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
This is untested but it should be something similar to this.
This link should also help you
I have a large image that I want to set as the background for a 404 page. I want the image to be 100% wide every time someone loads the page, so that if their screen is smaller the image becomes smaller, if the screen is bigger, the image stretches. The height should change based on the width, it doesn't need to be the height of the page.
I don't have the code for this. Would it be better to do it in the HTML file or the CSS file?
Can you possible create a JSfiddle that could serve as an example? Thanks!
Just add this to your CSS code...
body {
background-image:url('http://imageshack.com/scaled/large/268/gjb.png');
background-size:100%,100%;
}
And then create a body...
<body>
Dummy Code
</body>
jsFiddle
This is best left to CSS. Hard to tell without your code exactly, but the following should do what you want:
CSS
html {
height: 100%;
width: 100%;
}
body {
width:100%;
height:100%;
}
#background {
width: 100%;
height: 100%;
background-image: url('http://www.placekitten.com/200/200');
background-repeat: no-repeat;
background-size: 100%;
}
HTML
<div id="background">
<div id="content">
Hello world!
</div>
</div>
UPDATE
See the fiddle here: http://jsfiddle.net/DrydenLong/jywbd/
UPDATE #2
I'd like to point out, just in case those reading through don't see the comments on my post below, that while applying the background-image property directly to the body selector is simpler, it will also apply that same image to every page referencing that CSS file. Should you choose to use a single CSS file for your entire website, my code above will make it easier to have different background images for the 404 page and the rest of the site.
HTML Body content
none
CSS
html {
background: url(http://www.astrophotography.co.nz/Lrg_Slides/20120619Milkyway.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Demo(updated)
I think what you are really looking for is a background-attachment property.
body {
background-image:url('http://IMAGEURL');
background-attachment:fixed;
width: 100%;
}
You dont need to setup height property here, it's done for you automatically.
How about this:
body{background:url(http://www.astrophotography.co.nz/Lrg_Slides/20120619Milkyway.jpg) 0 0 no-repeat; background-size:100% auto;}
I am trying to position my logo onto the background image on my website but w/o success. The original size of my logo is 712x200 px. But I wanted it a bit smaller so I added height:140px and width:500px to my css (this is proportional to the original size of my logo).
However, the logo image is not resized (it doesn't become smaller as I defined in my css). Insted, it is cropped!? How come?
And how do I center the logo onto my background image, so that my loggo always appears in the very center of the screen (vertical and horizontal).
Here is my css code:
.logoimage{
background: url("images/Logo.png") no-repeat scroll center;
width: 500px;
height: 140px;
}
Here is HTML:
<section id="home" class="photobg">
<div class="inner">
<div class="copy">
<h1 class="logoimage"></h1>
</div>
</div>
</section>
Btw, I found some similar example of what I am trying to do here: http://milkandpixels.com/
So, basically I have a background image and I want to add the logo on top of it which should be centered all the time. Thanks all!
Hmmm, does adding this style fix the issue?
.logoimage{
background-size: contain;
}
Otherwise, let me know and I'll be happy to help further!
You should use background-size:
.logoimage{
background: url("images/Logo.png") no-repeat scroll center;
background-size: 500px 140px;
}
http://www.w3schools.com/cssref/css3_pr_background-size.asp
put the image in the image tag, add a class to the image tag. In the class put:
.logoimage{
width: 500px;
height: auto;
}
If none of the other answers work, you could always try and scale with
height: 50%
width: 50%
This style might be useful:
.logoimage
{
background:url("flwr.gif");
background-size:140px 500px;
background-repeat:no-repeat;
padding-top:40px;
}