So I know how to effectively add color wrapping to a body, such as webkit-box-shadow.
But this time I want to add images to my solid background as wrapping around my body. A good example is a sky blue background with random clouds surrounding your body div. Is there anyway to do this aside from just creating a background image that syncs up with your body perfectly?
Here is an example of what I'm trying to achieve: http://i.stack.imgur.com/ttoLR.png
Big thanks to anyone who can lend any kind of advice!
As with many things in HTML, you can achieve this in various ways. What I would do, would be to create a transparent image with clouds, and set that as the background-image of the parent div.
Example CSS:
#wrapper { width: 1000px; background: url('clouds.png') center top transparent; }
#inner { background: #FFF; width: 940px; margin: 0 auto; border-radius: 6px; }
Example HTML:
<div id="wrapper">
<div id="inner">
...Your page contents...
</div>
</div>
Related
this is what I'm trying to achieve.
I already know positioning, centering and stuff. The problem I have here, and which I want to ask you guys, is: what's the best practise to have a centered div and everything inside it to be centered while having a single one's background color exceed to the full width of the page always keeping it centered?
It's a super common layout in fact, I just don't know what's the correct way of "thinking" it.
Should I think the layout as "I make a big box with 1280px width, center it with margin: 0 auto; and then do something special for that div's background - and only the background, content should stay in place - to exceed or should I make something like a class to center every single element the same way but repeating my code?
So basically, should be all inside a single box and that div exceed in the background only or it's actually better to center everything separately by repeating the code?
Keep in mind the site is not responsive and doesn't need to adapt/scale and also that the light grey area is also the "body" colore so the dark grey area is the only special case in the page that should exceed.
My suggestion:
I would create three basic containers for the full width support. Then nest content in it!
html, body{
padding: 0;
margin: 0;
border: 0; /*ie older versions*/
}
header {
background-color: antiquewhite;
}
section{
background-color: ActiveCaption;
}
footer{
background-color: aquamarine;
}
.inner-wrapper{
max-width: 300px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
height: 80px;
text-align: center;
}
section .inner-wrapper{
height: 200px;
}
<header>
<div class="inner-wrapper">
<div>some content</div>
</div>
</header>
<section>
<div class="inner-wrapper">
<div>some content</div>
</div>
</section>
<footer>
<div class="inner-wrapper">
<div>some content</div>
</div>
</footer>
This is a absolut basic but robust layout an i used it several times. It is very easy to make it responsive with media queries or fluid with percentage settings!
In my opinion you should give to the body or to a container div the background color property and that div to be full width and height then the div that is in the middle you should give a margin:0 auto; and a specific width, this is what I would do, but it depends on what you are trying to do, what is the most common way you do it in order to you to know to how to do it the same next time, faster.
I have two background colors. One part is grey and the other one is white. The grey part of the background only covers a little part of the background, and rest is covered by white. Now I want to add an image as my 'logo', which should be on the grey part of the background. The image is currently underneath both backgrounds, and I just can't figure out how to get the image to be in front of the backgrounds.
<style type="text/css">
#grey-bg {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 25%;
background-color: grey;
}
body
{
background-color:white;
}
</style>
</head>
<body>
<div id="grey-bg">
<body bgcolor="grey">
</div>
<center><img src="http://img2.wikia.nocookie.net/__cb20110818145752/prototype/images/thumb/6/64/Prototype_-_Logo.png/660px-Prototype_-_Logo.png alt="Prototype"></center>
I hope this is understandable. I am quite new to this, and tried to be as as clear as I could.
Any help would be very appreciated!
Just move the image element inside the div with the gray background.
<div id="grey-bg">
<center><img src="http://img2.wikia.nocookie.net/__cb20110818145752/prototype/images/thumb/6/64/Prototype_-_Logo.png/660px-Prototype_-_Logo.png" alt="Prototype" /></center>
</div>
Fiddle: http://jsfiddle.net/LcDTS/
You should also avoid the center tag and use CSS instead.
I want to stack one division on top of another each with different background. the background, ofcourse will be transparent (.png). This is to recreate an effect of a pattern on an image and avoid loading an entire 1366 x 768 image.
my html is somewhat like this
<body>
<div id="firstLayer">
<div id="secondLayer">
<div id="mainContent">
main page content
</div>
</div>
</div>
</body>
I have a radial gradient for the body, the #firstLayer contains the main logo, and the #secondLayer must consist the transparent pattern.
my first try at css was somewhat like this
#secondLayer{
background: url("../images/crtPattern.png") repeat scroll 0 0 transparent;
}
But the pattern doesnt show up at all. How can i bring this #secondLayer on top of #firstLayer but just below the #mainContent?
You need to give width and height to #secondLayer like this Demo
#secondLayer{
background: url("../images/crtPattern.png") repeat scroll 0 0 transparent;
width: 100%;
height: 100%;
}
Are you trying to do this -
#firstLayer{ background: red; height: 500px; }
#secondLayer{ background: green; opacity: 0.6; filter:alpha(opacity=60); height: 300px; }
Demo
Width and height are definitely required if you have no DIV content. If that doesn't fix the problem for you:
Check image paths, can you load the same image using the same image path in an IMG tag?
Is your stylesheet inline or loaded as a separate file - this will affect relative paths to the image file.
Is your webserver case-sensitive? Does the case of your path match the image?
Hope this helps.
I already have a backround and what Im trying to do is put a white block on it and text/images inside, like here - http://dzconstructions.co.uk
thanks
Much better to avoid inline styles and place the following in a separate style sheet...
body {
background-image:url(/background-image.png);
}
div {
width:500px;
height: 200px;
background-color: white;
}
div's should help you to realize this. Just put the background upon the body and insert a div with background-color white. You may then insert the content/images into this div.
example:
<body style="background-image:url(/background-image.gif)">
<div style="width:500px; height: 200px;">
YOUR CONTENT AND IMAGES HERE
</div>
</body>
Use CSS to put background
body {
background: transparent url("Images/Background.png");
height: 100%;
width: 100%;
}
Then use Divs to add white block on it
So I want to make the background of my website two tone. What I mean is have a dark gray in the center, going all the way down, but then have a lighter gray on just the sides. Maybe 80-85% of the pages width.
Do would I go about doing this?
So what I want is the middle to be one color, and the two sides to be another color. Is there a way to set the bgcolor and then set it's width to 80% or something like that?
You'd be much better off using a background image, mate; assuming you know your target audience's primary monitor size, you could just make, say, a 1024x1 image with the parameters you require. If, however (and this is more likely the case), you are trying to get this to be dynamic, why not just use a div element, like so:
<style type="text/css">
#main
{
width: 84%;
background-color: #666666;
border: 1px solid #cccccc;
border-width: 0 8% 0 8%;
}
</style>
<div id="main">#content#</div>
I take that back... Really?! No percentage widths for borders?
If you're center area is of fixed width, then you can produce an image with that width, one pixel high, and then write the following CSS:
body {
background-color: #ccc;
background-image: url('some-image.jpg');
background-position-x: center;
background-repeat: repeat-y;
}
If not, you'll have to define a <div>. Odds are you'll have to define a <div> to hold your content anyway, if you want your content to be centered on page...
CSS
<style type="text/css">
body { background-color: #ccc; }
div.page { margin: 0 auto; width: 85%; background-color: #ddd; }
</style>
HTML
<div class="page">
<h1>Your page</h1>
<p>Coming soon...</p>
</div>
No. You'll need to create an element with the dark gray background separately from the light gray element.
Something like:
<body style="background-color:#ccc;">
<div style="margin:0 auto;background-color:#555;width:85%;">
<!-- rest of the page contents -->
</div>
</body>
Or use a background image on the body, but that's less scalable, and can't be used for percentage width.