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
Related
I am trying to set the background image for a div. But it aint seem to be loading..
html
<div class="cover"></div>
css
.cover
{
background-image: url(..images/Section.jpg);
background-size:cover;
height: 100%;
}
jsfiddle-http://jsfiddle.net/bfhzdpg5/
You're missing a forward slash before images by the looks of it.
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.
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 have a website in which the layout looks something like this: (image below)
On the left panel, I have a div which displays a logo. I have another div which I want to put beneath the logo and so divs these have to be these stacked over each other. I tried fiddling with the z-indexes, but didn't quite get the rquired thing.
How can this be done?
If z-index is not working for you try nesting the logo <div> in a wrapper <div> something like this
<div> <!--div container to hold the logo div-->
<div><!--Logo div--></div>
</div>
Reference: jsFiddle Logo Demo
Status Update: jsFiddle Logo Demo Just Border Version
The above jsFiddle has extensive notes in the CSS Section so you can understand how to setup your specific Logo.
HTML:
<div id="logoHolder">
<div id="logoContent">
<div id="logoImage"></div>
</div>
</div>
CSS:
#logoHolder {
width: 296px;
height: 296px;
background-color: white;
border: 3px solid red;
}
#logoContent {
width: 256px;
height: 256px;
padding: 20px;
position: relative;
border: 1px solid black;
}
#logoImage {
background-image:url(http://img841.imageshack.us/img841/4718/securitysealred256x256.png);
background-repeat: no-repeat;
background-position: center center;
background-color: aqua;
height: 100%;
}
Try to use also position: absolute; instead of relative for both elements when using z-index. Then it can make some distortion in your layout, so you can put the logo divs inside another relative div or use some other technique to fix it, however it must work when using position absolute and z-index. If it is still not working, check if some of your javascript is not interfering or if some other elements in your code have z-index, so it is causing the problems.
If using position absolute, do not forget to define margin-left and margin-top.
I'm not sure what you want to achieve but try this, adapting the values to your layout
Try using the margin property, as shown in your image. If you put margin-left as a negative value for the right-side div, then the right-side div will move below/above the logo div.
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.