I'm trying to work out how to add a background image to an existing web template, so the image sits at the bottom of the screen.
The template is : http://www.templatescreme.com/free-website-profi-admin
and a demo is here : http://www.templatescreme.com/demo/profi-admin/170
Not sure if I can make this on fiddle, so I've linked to examples of the template.
The template already has a background image (bg.gif) which is the black and grey banners at the top of the screen. I'd like to keep them, but add another to replace the grey background further down the screen.
Normally I'd just change the css on the body to specify the image:
background:url('bg.jpg') 100% 100% no-repeat; background-attachment:fixed; background-position:bottom; background-size:contain;
Obviously doing this will remove the existing image.
Is there any way I can get the two images on the same screen ?
Thanks
update FIDDLE added
I've added a fiddle that shows the issue..the waves should be at the bottom of the screen and fill the full width.
#divid {
background-image: url(../images/bg.gif), url('../images/bg.jpg');
background-position: left top, bottom;
background-repeat: repeat-x, no-repeat;
background-attachment: initial, fixed;
background-size: initial, contain;
}
Something like this should work. Make sure to have values for both images in all properties.
I've got this working, by leaving the existing (original) image in place and creating a DIV 100% x 100% and then applying a background image to that.
I've used:
.test {
position:fixed;
padding:0;
margin:0;
width: 100%;
height: 100%;
background:url('../images/bg.jpg') 100% 100% no-repeat;
background-attachment:fixed;
background-position:bottom;
background-size:contain; }
}
And that seems to have allowed it to work.
Thanks
Related
I'm trying to create a webpage. I'm having a little difficulty
with getting my background picture to show up. I had it up and running, but I decided I wanted to give it a responsive design, and I can't figure it out. This is my code for the image:
<style>
body .title_img {
background-image: url("SplashScreen.jpg");
height: auto;
width: 100%;
background-position: center;
z-index: -1;
}
</style>
<div class="title_img">
<!-- Background Splash Screen -->
</div>
If I give the height/width a definitive size (pixels) it shows up. I don't understand why 100% width with auto height wouldn't give me a picture that is 100% the size of the body (which I THINK i have made sure it was the 100% of the html document) and a height that is automatically proportional to the width. Can someone explain what I'm doing wrong?
EDIT- Added the HTML code.
Full-Page Background Images
I think what you are trying to create, is a full-page background image for your website. Based off of reading the code you provided, I believe you want something that does the following:
Fills entire page with image, no white space
Scales image as needed
Retains image proportions (aspect ratio)
Image is centered on page
Does not cause scrollbars
As cross-browser compatible as possible
Isn't some fancy shenanigans like Flash
If that is what you are trying to create, then I found a few lines of code that could help. Here is an example of how you could go about doing this with your image using css:
CSS File (That's where the magic happens):
html {
background: url("SplashScreen.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Just make sure your html file is setup correctly to use the css file, and it should create a cool background image you can use for your websites.
You can read more into this here and learn more about what makes this work.
Try setting height: 100% in body and html in your css:
html, body {
height: 100%;
}
And then put background-size: cover in body .title_img:
body .title_img {
background-image: url("SplashScreen.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
See reference here.
Use
background-size: cover
or
background-size:100% 100%.
with
background-repeat: no-repeat
That will set it to 100% of its container.
I am trying to make a CSS backgroun using a picture, but I am failing somewhere. The problem is that when I put a lot of content on the page, the picture gets bigger and the quality goes down. I tried to fix it with Position:fixed but not working. Here's the code:
html{
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:100%;
background-size:cover;
}
Also i tried to put a text-align:justify in the code but didn't work out too. I am messing something up really bad. Would love to get some help!
Cover make :
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
You should use contain instead
Try the
background-size: contain;
Because "cover" means "make it cover the entire box.
You can vary background-size like 50% or 60%
html{
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:100%;
background-size:50% 40%;
}
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:600px;/*use images height*/
height:auto;
width:1000px;
background-size:100% 40%;
I'm having trouble getting my website to display properly on mobile devices
Here's the code I used in my CSS, and this is what I want it to do on mobile devices too:
html {
background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
background-attachment: scroll, scroll;
background-color: #000;
background-repeat: no-repeat, repeat-y;
background-position: center top, center top;
}
html, body {
width:100%;
height:100%;
}
I have no idea what I've done wrong, I've tried a couple of fixes and I haven't been able to make it work. Can someone help? Links below.
My website - http://renoized.com
You could try either:
Background size: cover;
or
Use an image instead of a background, using absolute positioning and a z-index value of -999. Since iOS doesn't support background images with 100% width.
The method I used to fix the problem is this, regardless of how elegant or inelegant it is, I'm just glad it works.
All I had to do was copy the css from here:
html {
background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
background-attachment: scroll, scroll;
background-color: #000;
background-repeat: no-repeat, repeat-y;
background-position: center top, center top;
}
to my content container tag, which in my case is #page.
What this does is give the content its own background in the correct place. It also fixed a problem I had on .desktops where the background would move if your device width is smaller than the content <div>
I would like to have a picture as a background. I've written it in my CSS stylesheet as following:
body {
backgroung-image: url('link to my picture');
width: 600px;
}
When looking at this in the browser I see maybe a fifth of it since it is so big. Is my width property doing anything in the code above? How can I adjust the size of the picture so it fits the HTML element?
Use background-size: cover; to make the background-image cover the whole body element.
body{
background: url('http://placehold.it/350x150') no-repeat;
background-size:cover;
}
Note: I have used no-repeat because the default value for background-repeat: is repeat;.
If this syntax makes more sense to you then can use this one as well:
body{
background: url('http://placehold.it/350x150');
background-repeat:no-repeat;
background-size:cover;
}
DEMO http://jsfiddle.net/a_incarnati/puakv13x/
It seems like you have a spelling error (backgroung-image: url('link to my picture')) this should be changed to background-image: url('link to my picture').
The answer to your question
How can I adjust the size of the picture so it fits the HTML element?
Do this by adding a background-size:contain. You can also define how many pixels you want it to be; background-size: 150px 100px the numbers are (x, y).
It may also be required adding a background-repeat: no-repeat if image is not scaled.
Take a look at this site: http://www.w3schools.com/cssref/css3_pr_background-size.asp
in your style.css, or in your index.html;
body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}
I'm trying to make a GIF fit my whole screen, but so far its just a small square that is on my screen while the rest is white. However, I want it to take up all the space.
Any ideas?
if it's background, use background-size: cover;
body{
background-image: url('http://i.stack.imgur.com/kx8MT.gif');
background-size: cover;
height: 100vh;
padding:0;
margin:0;
}
IMG Method
If you want the image to be a stand alone element, use this CSS:
#selector {
width:100%;
height:100%;
}
With this HTML:
<img src='folder/image.gif' id='selector'/>
Fiddle
Please note that the img tag would have to be inside the body tag ONLY. If it were inside anything else, it may not fill the entire screen based on the other elements properties. This method will also not work if the page is taller than the image. It will leave white space. This is where the background method comes in
Background Image Method
If you want it to be the background image of you page, you can use this CSS:
body {
background-image:url('folder/image.gif');
background-size:100%;
background-repeat: repeat-y;
background-attachment: fixed;
height:100%;
width:100%;
}
Fiddle
Or the shorthand version:
body {
background:url('folder/image.gif') repeat-y 100% 100% fixed;
height:100%;
width:100%;
}
Fiddle
You can set up a background with your GIF file and set the body this way:
body{
background-image:url('http://www.example.com/yourfile.gif');
background-position: center;
background-size: cover;
}
Change background image URL with your GIF. With background-position: center you can put the image to the center and with background-size: cover you set the picture to fit all the screen. You can also set background-size: contain if you want to fit the picture at 100% of the screen but without leaving any part of the picture without showing.
Here's more info about the property:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Hope it helps :)
if you're happy using it as a background image and CSS3 then background-size: cover; would do the trick
This should do what you're looking for.
CSS:
html, body {
height: 100%;
margin: 0;
}
.gif-container {
background: url("image.gif") center;
background-size: cover;
height: 100%;
}
HTML:
<div class="gif-container"></div>
In your CSS Style tag put this:
body {
background: url('yourgif.gif') no-repeat center center fixed;
background-size: cover;
}
Also make sure that it's parent size is 100%