There...
#logoWrapper{
background-image: url(../image/bg_img.jpg);
height:86px;
width:100%;
}
Q> How to fix the size of the image get into #logoWapper same with its Wapper automatically?
#logoWrapper img{ // not work
height:86px;
width:100%;
}
Thank you!
For a background image in CSS3 if you want to stretch not repeat you can use background-size: 100%;
Documented here http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
Alternatively you can layer a absolute positioned image inside a relative positioned div and add an additional wrapper.
<style>
#wrapper {
position:relative;
...
}
#wrapper div, #wrapper img {
position:absolute;
top:0px;
left:0px;
...
}
</style>
<div id="wrapper">
<img ... >
<div> this goes on top of image</div>
</div>
Related
I have a div with variable height (only an image with max-width:100% and auto height to scale it on resize).
So I would like to have a div with text overlaping this image div... Ok. But then I would like to have other div under this wrap with image..
Here's the problem.. I don't know the height of the div ('cause it deppends on the image height on resize) and then, when I try to continue the other divs that should be under this wrap, the get stucker under it 'cause its position is absolute!
<div id="wrap">
<div id="background">
<img src="http://i.imgur.com/hXtf2Dq.jpg" class="myImage" />
</div><!-- #wf_sliderItemBackground -->
<div id="mySubtitle">
dfdf
</div><!-- #background -->
</div><!-- #wrap -->
<div>
I CANT MAKE THIS DIV APPEAR UNDER THE IMAGE... I CANT USE DIMENSIONS SINCE I'M TRYING TO CREATE A RESPONSIVE LAYOUT AND USING HEIGHT IN PIXELS WOULD RUIN IT...
</div>
And here is the CSS:
* { margin:0; padding:0; }
#wrap {
width:100%;
display:table;
text-align:center;
}
#background {
width:100%;
max-width:100%;
position:absolute;
}
.myImage {
width: 100%;
max-width: 100%;
}
#mySubtitle {
margin:0 auto;
width:100%;
max-width:1200px;
background:green;
position:relative;
}
Check the fidddle:
http://jsfiddle.net/cjd6n0mm/
Since your text div is outside the wrap div, wrap should be relative with a height defined
#wrap {
width:100%;
position:relative;
display:table;
text-align:center;
height:50%
}
and cover your text div in specific div
div.a {
color:blue;
position:relative;
bottom:0;
}
Also, instead of hard reset *, use html,body reset, thats a rule of thumb
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
Fiddle demo
I want to use background-size:contain and background-size:cover at the same time. I want to have my background image stretch 100% width x 100% height of the browser window at all times while maintaining the scale of the image.
Here is a perfect example of what I'm trying to do
Is there a pure css route to achieve this?
Here is my code:
<div class="page-section clear">
<div class="landing_photo clear" style="background-image:url('<?php echo get_template_directory_uri(); ?>/img/tempory_landing.png');">
</div>
</div>
.page-section {
width:100%;
height:100%;
margin:auto;
}
.landing_photo {
width:100%;
height:100%;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
}
In-line styling is not great, so first of all I would put your image url in the CSS file.
Second, you need to assign a fixed value to height and width to .landing_photo.
This the resulting CSS for achieving what you want:
.page-section {
width:100%;
height:100%;
margin:auto;
}
.landing_photo {
width:500px;
height:500px;
background-position:100% 100%;
background-repeat:no-repeat;
background-image:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
}
and the markup
<div class="page-section clear">
<div class="landing_photo clear"></div>
</div>
I have created a DEMO for you.
i try many ways to force my image full width but it can't
you can see my arrows and my html and css code :
<div class="homeContentWrapper">
<!-- WELCOME BOX-->
<div class="imgBghome">
<img class="bgCau" src="images/cau.jpg">
</div>
</div>
and my css
.homeContentWrapper{
position: relative;
height: 726px;
width: 100%;
z-index:0;
}
.imgBghome{
position:relative;
overflow:hidden;
height:100%;
width:100%;
right:0;
left:0;
top:0;
bottom:0;
margin:auto;
z-index:0;
}
please give me advices
thank you!
You can try below code:
body{margin:0;}
You could set the image as a background of the body. It's a clean way of setting a background and you will use no HTML elements.
body {
background-image : url("images/cau.jpg");
background-size : cover;
}
I have a div that has background that is partly transparent with a watermark. Inside of the div I'm calling an image but I want that image to appear behind the background of the div so I can have the watermarked transparent div background appear over the image. Is that possible? Here's the css that I have that isn't working...
.artist-container {
background:url(images/artist-back.png);
width:310px;
height:376px;
margin-left:-9px;
z-index:331;
position:relative;
}
.artist-container img {
width:300px;
height:300px;
margin-left:5px;
z-index:330;
position:relative;
}
By giving .artist-container a higher z-index, you are placing it higher in the stacking order than the child image, though children always have a higher z-index than their parents.
If you want to give the effect of a watermark, you can:
Make the image the background of the div and place an image watermark inside it.
Position another div within .artist-container absolutely, with the same dimensions as that of the image and with a higher z-index of the image, with the watermark as the background.
I whipped up a small sample using some spans, which won't add any semantic content to your document and will still maintain the semantic meaning of your image.
HTML:
<span class="cover_contain">
<img src="http://i.imgur.com/hla4q.jpg" alt="[image]" width="128" height="128" />
<span class="cover_image"></span>
</span>
CSS:
span.cover_contain {
display: inline-block;
position: relative;
}
span.cover_image {
display: block;
background: url('http://i.imgur.com/5BtFV.png') center center no-repeat;
width: 128px;
height: 128px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
jsFiddle Live Preview
make the image as the background-image of the div and the watermark as the img
it's not possible to put a background in front of an image of the image is in that element. You can simply use the main image as background, or:
what you could do
<div class="holder">
<img src=".." class="main_image">
<img src=".." class="watermark">
</div>
.holder {
width:100px;
height:100px;
position:relative;
display:block;
}
.main_image {
position:absolute;
top:0;
left:0;
z-index:0;
}
.watermark {
position:absolute;
top:0;
left:0;
z-index:9;
}
You can use the negative z-index, but in that case you must have the wrapper not to have any z-index. It's one of the features of stacking context.
Here is a demo fiddle: http://dabblet.com/gist/1731538
And the code for you would be something like this:
.artist-container {
background:url(images/artist-back.png);
width:310px;
height:376px;
margin-left:-9px;
position:relative;
}
.artist-container img {
width:300px;
height:300px;
margin-left:5px;
z-index:-1;
position:relative;
}
I'm looking for CSS rules to set a simple page layout.
I want a header div that has a fixed height, and extends fully across the top of the viewport from left to right,
I want a main content div that completely fills the remainder of the viewport.
There should be no area within the viewport that is not within one of these two divs, and neither div should extend beyond the viewport.
And these should remain true as I resize the browser. Regardless of what I put in either div. (Assuming, of course, that I'm not using overflow:visible.)
Seems simple enough, but I've not been able to make it work.
What about something like this: http://jsfiddle.net/WqCYh/
For the sake of people not wanting to click the link, here's the HTML and CSS:
<style type="text/css">
#header
{
height:100px;
background-color:red;
position:absolute;
top:0px;
left:0px;
right:0px;
}
#body
{
background-color:blue;
position:absolute;
top:100px;
left:0px;
bottom:0px;
right:0px;
}
</style>
<div id="header">
Header
</div>
<div id="body">
Body
</div>
Are you sure you need your content div to be the height of the browser? You can apply a background color to the body to simulate full viewport coverage.
Anyway here is the 100% height code...
CSS
html,body { height: 100%; }
#header { height: 100px; background: red; }
#content { min-height: 100%; background: blue; }
#inner { padding: 20px; }
XHTML
<div id="content">
<div id="header">
<h1>Header</h1>
</div>
<div id="inner">
<p>Content</p>
</div>
</div>