I am trying to use the graphic below and I would like to repeat from the right to continue on the boards. What would my best options be?
You can make this image the background of an css element and set property repeat-x.
background: url("paper.gif") repeat-x;
You can use background-position property, like this:
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-position: right 0;
background-repeat: repeat-x;
}
http://jsfiddle.net/72p5h6hs/2/
Repeating the background might look a little funny so as an alternative you can use background-size:cover to make the image stretch the whole width of the screen.
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-size: cover;
}
Related
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
I've set my background image (1280 x 853) and that doesn't suit well the screen.
How can I fix that?
body {
background-image: url("/assets/pic.jpg");
}
You can use:
body {
background-image: url("/assets/pic.jpg");
background-size: cover;
}
And optionally set background-repeat: no-repeat to prevent to image from repeating.
Here's a example.
body {
background-image: url("/assets/pic.jpg");
background-size: cover;
background-repeat: no-repeat;
}
In addition to background-size: cover, you can use the background-position property to place your image where you want it to be, as sometimes background-size:cover will cut off areas that you wanted to be visible. Using percentage values in the background-position property will allow you to fine tune this more.
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 have two html pages (index.html and about.html) with the same background in the body tag. I am using the following CSS to create the background:
body {
background: url("http://www.skrenta.com/images/stackoverflow.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
However, the browsers (Firefox and Chrome) are not positioning the image correctly. Since the background color is white, index.html has a white line under the background image. I am assuming that the image height is too short.
Yet, there is a block of white space under the background image of about.html, bleaching over a quarter of the page.
How does this happen when I'm using the same CSS.
While on this topic, what is the best way to manage a background image for different screen resolutions?
Try:
background-size:contain;
contain property scales the image to the largest size such that both its width and its height can fit inside the content area.
The best solution that I can come up with was to use background-attachment: fixed;. This filled the entire background with my image.
I have not figured out as to why my CSS was displaying my background in different ways. This is something to look at.
body {
background: url("http://www.skrenta.com/images/stackoverflow.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
I prefer you first take a small slice of image by photoshop and save it for web and devices or take a small size by snipping tool.Than you will get a small image with small size.
than type bellow code
body {
background-image: url('http://www.skrenta.com/images/stackoverflow.jpg');
background-repeat: repeat;
}
I have a site and I wanted to change it's background. I want to put a background on top and bottom.
Here is the CSS code:
div.bg_top {
background-image: url('bg_top.jpg');
background-repeat: no-repeat;
background position: top center;
}
div.bg_bottom {
background-image: url('bg_bottom.jpg');
background-repeat: no-repeat;
background position: bottom center;
}
HTML code:
<div class="bg_top">
<div class="bg_bottom">
Content Here.
</div>
</div>
is that correct?
i'd suggest using CSS short-hand for best practice
.bg_top { background: url('bg_top.jpg') no-repeat top center; }
.bg_bottom { background: url('bg_bottom.jpg') no-repeat bottom center; }
As Lance said just change the background position: to background-position: it should work fine.
But my concern is that, the way you have given the backgrounds, with different resolutions the two background images may overlap and it will screw all the design. So, to make it compatible with all the resolutions you need to choose any other option. I will suggest use any image editor and place the images as you want and make one image and then use that image as the background.
To avoid changing the html, you can also put one of the backgrounds in the html and the other in the body. And use a min-height (height for IE6) to avoid overlap.
It should work if you fix the background-position:
background-position: center top;