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.
Related
BBC Logo: http://www.bbc.com/ (This is the BBC page that's since been updated from the one I'm attempting to recreate; subtle differences)
My goal is to set the background of the individual BBC letters. I'm remaking the site for a course I'm taking on Udemy. I'm not having trouble in actually setting the background to white, but actually in setting the width and height of the background.
Whenever I specify the width/height in the background shorthand property there is no effect.
Sorry if I'm leaving something out here, first real post.
My current effort (sample):
HTML:
<div id="logo">
<div class="letter>
<h1>B</h1>
</div>
<div class="letter>
<h1>B</h1>
</div>
<div class="letter>
<h1>C</h1>
</div>
</div>
CSS:
#logo {
display: inline-block;
}
.letter {
display: inline-block;
color: #7A0000; (Set text to color of page background)
background-color: #fff; (Want to create white box around each letter)
background-size: 25px 25px;
}
background-size is to set the size of background images, not size of background-color. For set width and height possibly set the div those sizes.
.letter
{height:25px;
width:25px;
}
Make sure you set the font size to less than 25px for the h1 if you want to set the height of .letter to 25px. You should also remove the top/bottom margins of the h1 tag, otherwise, it will come out of the box.
.letter h1{
font-size:20px;
margin:0px;
}
Here is a demo
I have some HTML/CSS that I came up with, I have centered the page and attempted to get an image either side (or behind it) of the centered page but I'm not sure how.
Sorry for the bad explanation, here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/images/background.png")
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
</body>
</html>
I want to be able to get the background.png to the left, and the right of the page.
P.S: Sorry of I have done anything incorrect here, I am new.
Any help would be great!
Thanks,
—ItzJavaCraft
Here is a way to get one image the fullwidth and height of the screen in the background.
body {
background: url("http://placehold.it/400x300/ff66cc/ffffff&text=icon1") no-repeat center center fixed;
background-size: cover;
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
There's one simple error causing the background to not display: the relative URL should not start with "/" (unless, of course, you want to use an absolute path and are using a system where / refers to your root directory). Additionally, you'll need to use the background-size or background-repeat property to make the image fill up the entire page.
If you want your "wrap" element to remain white, you can just add a background-color to that element (adjusting the size of the element as necessary to get the coverage you're looking for).
The background-image property sets one or more background images for an element. The background of an element is the total size of the element, including padding and border (but not the margin). By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Tip: Always set a background-color to be used if the image is
unavailable..If you want to provide a position in a background image,
you can use some properties like:
Property:
background-position
Also, you can use a shorthand for that like jack blank code, but if this is hard to use for you, you can make it for separate like:
Full background image to your page:
background-position: cover;
Or if you want to change the position, you can use center, left, right, and top
For example:
background-position: center top;
or
background-position: left center;
or
background-position: top center;
etc.
You can learn about this property with more examples here:
http://www.w3schools.com/cssref/pr_background-image.asp
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.
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>
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.