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)
Related
** UPDATE: I went to the settings at which my PDF was being rendered, and changed size to "Letter" instead of "A4" **
So DOMPDF is supposed to render an html page, yet with the settings I have, it's not rendering the background image to be margin-less (the bottom and right side still have margins).
Here's my css code on the HTML page being rendered:
#page { margin: 0px 0px 0px 0px; }
body {
background-image: url(../../picture.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
Yet When rendered as PDF, here's how it looks:
It might be doing this based on the settings that it outputs as, but I'm not sure. It's being rendered as an 'A4' paper, as 'portrait' layout.
How would I be able to make the margins go away, so that it stretches all the way horizontally and vertically?
Dompdf (up to and including 0.7.0) does not currently support the background-size CSS declaration. Until that is fully supported by dompdf you can position an image using fixed positioning. You need to know the dimensions of the page and the margins, so you might want to declare those in your styling.
Try this in 0.6 or newer:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
#page {
size: 8.5in 11in;
margin: .5in;
}
#bgimg {
position: fixed;
left: -.5in;
top: -.5in;
width: 8.5in;
height: 11in;
z-index: -999
}
</style>
</head>
<body>
<img src="picture.jpg" id="bgimg">
</body>
</html>
I need to display simple under contruction page which has an image let us say 800x700px & i want this image to appear at the center of page both vertically & horizontally,
I tried different approach's but didn't work. Sample html below
<!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">
<head>
<style type="text/css">
html, body { height: 100%; width: 100%; }
body { position: relative; background-image:url('images/bg.jpg');background-repeat:repeat; }
#mydiv {
position: absolute;
height: 100%;
width: 100%;
text-align:ceter;
}
</style>
</head>
<body>
</body>
</html>
This CSS can center your image regardless of the length.
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
The secret is in the transform. Without it, it only puts the top left pixel of the image in the center, not the whole image beautifully.
Check this article out by Chris Coyier on CSS-Tricks. I think it might help out. I ran into the same problem a few days ago and his answer worked for me.
Centering an image horizontally and vertically
Basically the idea is, if your image has a set width and height. You can absolute position it from the left and top 50% and then do negative margins equal to half of the width and height to bring it back dead center. They're are other ways to vertically center an image if it doesn't have set dimensions.
You didn't have the ID set for the div, I have edited that, once that's done, the image will be horizontally aligned. Also, mydiv need not be positioned "absolute".
To vertically align the picture, the best solution without using javascript would be to give the img a margin-top with %.
#mydiv {
text-align: center;
}
#mydiv img {
margin-top: 15%;
}
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
I'm a bit stuck with some of the new CSS3 Background commands an was wondering if anyone could advise?
I'm trying to create a that has a background image that scales dynamically to the Screen/Browser Size.
here's is an example of the effect I want to achieve, this is running on the < body > tag http://www.css3.info/demos/background-size-contain.html
The problem I am having is that the < body > tag needs no height or width defining, but a < div > does, here is my code:
<!DOCTYPE html>
<html>
<head>
<title>background-size: contain;</title>
<style type="text/css">
#please_expand {
background-image: url(images/betweengrassandsky.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #EEE;
background-size: contain;
}
</style>
<body>
<div id="please_expand">
<h1>Example J - background-size: contain;</h1>
</div>
</body>
</html>
On block elements (like div), height does not work the same way as width. If you don't specify a height, the element will be as high as its content. That's one thing.
height: 100% would be the way to go if you want your div to be as big as body is, but the trick is that a percentaged height always comes from the parent's height. So you have to set height: 100% on all the parents (including html) for crosss-browser results.
html,body,#please_expand { height: 100%; }
jsFiddle Demo
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>