I have a background in place on my wordpress theme,
I have another image which I would like to position it in the center of the page and horizontally repeat it from left to right.
very similar to this website http://www.tcs.com/homepage/Pages/default.aspx
any tips or instructions is highly appreciated.
Thank you
I would use a wrapper to accomplish this.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
background-image: url(image1.jpg);
}
#wrapper {
background-position: center middle;
width:100%;
height:100%;
margin: 0px;
padding: 0px;
background-image: url(image2.jpg);
background-repeat: x-repeat;
}
</style>
</head>
<body>
<div id="wrapper">
</div>
</body>
You can set multiple background images with CSS3 like this:
body {
background: url(first_image.png) top left no-repeat,
url(second_image.png) center center repeat-x;
}
You just have to separate the rules with a comma. It's pretty widely supported.
Is this what you're looking for?
http://jsfiddle.net/4S5HR/
It depends on where you have your original background image. If it was attached to the html like this
html {
background: url(original-background.png) top left repeat-x;
}
You could attach the repeating horizontal image to the body like this
body {
background: url(repeating-background.png) top center repeat-x;
}
Could you provide some more details as to how your css is and I can give you a more detailed answer but this should work for what you require.
Related
I am trying to make background image work like http://www.rottentomatoes.com/
I looked at the css used by them which is this:
background:url(../Content/themes/base/images/background.jpg) no-repeat fixed 50% 0px rgb(0, 0, 0);
I tried this with background image with resolution of 1280*1024 but it does not work same way at all. It does not cover whole background leaves spaces on both left and right side of the page. Also works differently for all main browsers ie, firefox and chrome.
Is there a way to make background image like rottoentomatoes for all browsers their background image stays static means if some small text is written on the left of the background image it will be similar in all browsers?
This is the screenshot look at the black background image is not covering whole screen.
I also tried following css:
background: url(../Content/themes/base/images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
this covers the whole screen but is not consistent on all browsers and ruins the quality of the image. Not at all like rottentomatoes.
Added rottentomatoes image to explain what i meant by static text in background image.
Here is a great place to start, ref URL below. When you visit the web page as you scroll down they go through all aspects of aligning the background.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
margin-left:200px;
:#5d9ab2 url('img_tree.png') no-repeat top left;
}
.container
{
text-align:center;
}
.center_div
{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:90%;
background-color:#d0f0f6;
text-align:left;
padding:8px;
}
</style>
</head>
<body>
<h1> </h1>
</body>
</html>
Refer Link Check This :- Css Background In W3Schools
Hi there I am trying to make and image on top of another in 1 tag.
Basically I want an image to be the banner on top, so repeat-x
then under it I want the background image repeated multiple times
So something like this
body
{
background:url(banner.jpg); repeat: repeat-x;
background:url(background.jpg);
}
not 100% sure how to do it...I think that explains how I would like it.
I may also want something on the bottom added later so like after that background is done I would want something like background:url(footer.jpg) repeat: repeat-x; bottom
Im thinking this is what youre after.
http://jsfiddle.net/wpqDy/
html {
height: 100%;
width: 100%;
background: url("bg.jpg") repeat 0px 3px;
}
body {
background: url("bg_top.jpg") repeat-x top left;
height: 100%;
width: 100%;
}
You'll need to put background images on two different containers. Perhaps something like this:
<body>
<div id="page">
<div id="content">
...
</div>
</div>
</body>
#page
{
background:url(background.jpg);
}
#content
{
background:url(banner.jpg); repeat: repeat x;
}
CSS3 has support for multiple backgrounds on a single element; this is relatively widely supported, except for IE <= 8. You can write the following:
body
{
background-image: url(banner.jpg), url(background.jpg);
background-repeat: repeat-x, repeat;
}
I have this CSS code:
<style>
body {
position:absolute;
background-image: url(art/c11.jpg);
width:100%;
height:100%;
}
</style>
As I read on the net, I expected that this would resize the background image and fit it to the browser window.
But no. I think I am obviously doing something wrong (I don't know enough CSS). Any tips?
UPDATE:
I add the hole example (not working):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No Title</title>
<style type="text/css">
body {
position:absolute;
background-image:url(art/c11.jpg);
background-size:100%;
background-repeat: no-repeat;
width:100%;
height:100%;
}
</style>
</head>
<body >
</body>
</html>
add the background-repeat property.
finished code should look like this:
body {
position:absolute;
background-image: url(art/c11.jpg);
background-size:100%;
background-repeat: no-repeat;
width:100%;
height:100%;
}
If you're going to make this work cross browser, you're better off putting an image on the page and then wrap all your content in a DIV that's laid on top. E.g.
CSS
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#content {
position: relative;
z-index: 1;
}
If you plan on supporting IE6, then add this snippet:
<!--[if IE 6]>
<style type="text/css">
html {
overflow-y: hidden;
}
body {
overflow-y: auto;
}
#background {
position:absolute;
z-index:-1;
}
#content {
position:static;
}
</style>
<![endif]-->
HTML
<img id="background" src="art/c11.jpg" alt="" />
<div id="content">
Your content
</div>
Code in action.
I dont think there is a way to stretch or control the size of a background image using CSS. However, you could use the background-position, background-attachment and background-repeat porperties to achieve an alternative result..
or you may use some JavaScript putting Image into a lower z-index layer and set the layer as you backgournd, however that is a little bit Hacking there
By using css3 you can achieve perspective image resize,
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This works in all browsers and ie9+.
The following filters works in ie7 and ie8 too.
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";
You can use the CSS3 property of background-size:100% but the support for this property is not across the board yet and won't work in older browsers. To achieve what you want you need a bunch of hacks to get it to work. There are a number of blogs like this one that will show you what you need to do. I don't recommend doing this since if you have a big image/slow connection you will see the image load. If the image isn't the best quality then it won't look good all stretched across a screen or in a different resolution.
I would like to use an image as background. Unfortunately, when I set the Background-image property to url(myUrl), I get the image which repeats itself in the background in several row and column. I guess it's because the image its naturally small.
So, how to get the image to expends enough so that it does not repeat itself, but rather occupies all the back ground?
Thanks for helping.
you can use two methods;
javascript or css
Jquery has a solution called suppersized;
http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/
or with CSS:
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
AND HTML
<body>
<div>
<img id="background" src="image.jpg" alt="" title="" />
</div>
You probably want this:
http://css-tricks.com/how-to-resizeable-background-image/
Looks like the simplest way.
P.S.: You can't do it with pure background-image. You have to do it with different layer.
To prevent an image from repeating itself, and adjust the image size to fit the screen size, the following two CSS instructions will help out:
background-repeat: no-repeat;
background-size: cover;
You can have the property background-size in CSS3 for stretching a background image. But CSS3 isn't widely supported.
If you don't want to repeat the background image then you can use background-repeat: no-repeat.
This is the solution from W3Scools using CSS:
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://marketplace.canva.com/BAAuU/MAD4tNBAAuU/1/s2/canva-egg-and-ceramic-rabbit-MAD4tNBAAuU.jpg");
/* Full height */
height: 100%;
width: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg"></div>
<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
</body>
</html>
Is it possible to to have:
A patterned body background image for the main page,
Followed by another background image on top of the first one (this time a picture on the
right hand side, on edge of the page)
The content (using semi-trrasparent gif is overlayed across the body background images)
should be scrollable whilst both background images remained fixed.
Ideally css solution without script or hack
Please help as I am loosing my hair and sanity trying to figure how to get this to work.
Many thanks
Del
CSS example for two non-scrolling background images
Some browsers (Safari) allow (CSS3) multiple background images, but since these aren't yet universal, here's my solution.
For a start, you don't need a fixed position div. You can prevent the background image from scrolling by using:
background-attachment: fixed;
Use background-position to put the background top, bottom, center, right, left e.g.
background-position: top right;
And set background-repeat to the setting you want.
The CSS
The CSS below will give you two background images that don't scroll in the page background - set the width of #mydiv to whatever you want (or leave it unset for 100%) and its height to 2000px (just to test the scrolling), and use your image URLs instead of the example:
body {
background-image: url(body_background.gif);
background-attachment: fixed;
}
#mydiv {
position: absolute;
right: 0px; /* or whatever */
background-image: url(div_background.gif);
background-attachment: fixed;
}
The HTML
If you need a complete example, change the background image URLs and use this (obvious) HTML/CSS example as a starting point:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css">
body {
background-image: url(body_background.gif);
background-attachment: fixed;
}
#mydiv {
position: absolute;
top: 0px; /* 0 is default for top so remove or make > 0 */
right: 0px; /* or left, whatever you need */
width: 250px; /* or whatever you want */
height: 1500px; /* remove after testing! */
background-image: url(div_background.gif);
background-attachment: fixed;
}
</style>
</head>
<body>
<div id="mydiv">
the div
</div>
</body>
</html>
This probably isn't the most "correct" solution, but you can use a separate background-image for the HTML and body tags. IE
html {
background-image: url('images/bg_repeat.gif');
background-position: top center;
}
body {
background-image: url('images/splatter_top.png');
background-position: top center;
background-repeat: no-repeat;
margin: 0;
padding: 0;
text-align: center;
}
You may do this using a mixture of background images and absolutely positioned divs/images:
the body gets the patterned background
the picture on the side is an image (or a dive with the image as background) that uses fixed positioning (i.e. uses the position:fixed css rule)
the content would be inside a div with the semi transparent gif as background.
I think that it would abtain what you need, everythign is doable in CSS except perhaps the fixed positioning for some versions of IE (namely IE6 and below) as position:fixed is available in IE from version 7 onwards only in "standards-compliant mode" (but this article may help: position:fixed for Internet Explorer)