I have an image that isn't as big as all screen sizes, yet I want it to be displayed on screens with whatever width by adding a repeated pattern on either side. I can of course make the image a lot wider but that would cause the page to load a lot slower as well.
It's a bit hard to explain by text so here are some images and the JSFiddle Demo.
#layer_top {
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
width:100%;
height:136px;
}
#layer_transition {
width:100%;
height:36px;
margin-top:-36px;
background-image:url("http://puu.sh/cajG0/2768274649.png");
background-repeat:no-repeat;
background-position:center;
}
#layer_bottom {
width:100%;
height:100px;
background:url("http://puu.sh/cajmN/9b1e9ef79f.jpg") repeat;
}
<div id="layer_top"></div>
<div id="layer_transition"></div>
<div id="layer_bottom"></div>
Result:
Wanted Result:
You could achieve that by adding a pseudo-element to the top layer which is formed as ellipse and it's positioned with the respect of the layer.
Then simply apply the same background image to both, layer and the pseudo-element:
Example Here
#layer_top, #layer_top:after {
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
}
#layer_top { width:100%; height:136px; position: relative; }
#layer_top:after {
content: "";
position: absolute;
z-index: -1;
width: 500px; height: 100%;
left: 0; right: 0; top: 20%;
margin: auto;
border-radius: 50%;
}
You could also use clip to cut the extra part of the oval shape.
A bit of a different solution but it might just work:
Why don't you replace the mask image? So instead of overlaying this gray thing, make an overlay for the purprle one. If you position that centered against the top of the grey area, you've got the same result/
Well, the problem is with the div elements you created its hard to get it work.
An easy solution is to use for the bottom part 3 diffrent divs.
<div id="side_layer"></div>
<div id="layer_bottom"></div>
<div id="side_layer"></div>
I created a simple jsfiddle for you: jsfiddle
It does work responsive until 500px width.
You could simply add a media query and hide the right and left layer then.
You can do this it is easy.
Add CSS class to body or create parent div above body and style it.
Working Fiddle
http://jsfiddle.net/7n06und5/11/
.parent {
margin:0;
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
width:100%;
}
#layer_top {
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
width:100%;
height:136px;
}
#layer_transition {
width:100%;
height:36px;
margin-top:-36px;
background-image:url("http://puu.sh/cajG0/2768274649.png");
background-repeat:no-repeat;
background-position:center;
}
#layer_bottom {
width:100%;
height:300px;
background:url("http://puu.sh/cajmN/9b1e9ef79f.jpg") repeat;
width:500px;
margin:0 auto;
}
HTML
<body class="parent">
<div id="layer_top">
</div>
<div id="layer_transition">
</div>
<div id="layer_bottom">
</div>
</body>
Hope it helps you!
you can try this with css border-raidus
HTML
<div id="header">
<div id="inner"></div>
</div>
CSS
#header{
background:url(http://puu.sh/cajm0/c0c2cc9475.jpg) repeat-x;
//height:75px;
//width:100%;
padding:3% 15%;
}
#inner{
background:url(http://puu.sh/cajm0/c0c2cc9475.jpg) repeat-x;
height:75px;
width:100%;
border-radius:0 0 50% 50%;
}
Fiddle Demo
Related
I have this page:
http://fetr.zonedesign.ro/contact/
I have a map and a map over blue div I would like to display at center
This is code HTML:
<div style="float:left;width:100%;padding:0 10%;text-
align:center;margin:10px auto;display:block;">
<div class="date-contact">proba</div>
<?php echo do_shortcode( '[huge_it_maps id="1"]' ); ?>
</div>
This is code CSS:
#media (min-width: 800px) {
.date-contact
{
width:300px;
height:150px;
background:blue;
position:absolute;
z-index:10;
}
}
I tried to use margin: 0 auto but unfortunately not working.
Can you please help me solve this problem?
Thanks in advance!
if you want to keep its position absolute you can use calc for top/left but you need to know the height/width of your div.
Further, the parent of this blue box needs to be position relative/absolute/or fixed:
here's a demo
<div></div>
div {
background: blue;
position: absolute;
width: 100px;
height: 100px;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
My suggestion is :
wrap the two div's div#huge_it_google_map1_container and div.date-contact with a parent div. The parent div's width will be same as that of div#huge_it_google_map1_container.
So, the html will be:
<div class="map_parent_wrapper">
<div id="huge_it_google_map1_container"></div>
<div class="date-contact"></div>
</div>
The css will be as follows:
.map_parent_wrapper {
position:relative
}
.date-contact {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
.date-contact {
background: none repeat scroll 0 0 blue;
clear: both;
height: 150px;
margin: 0 auto -208px;
position: relative;
width: 300px;
z-index: 10;
}
Your Blue div is absolutely positioned so its hard to get a center aliment,
Make it relatively positioned and align center using margin 0px auto;
Now give a negative margin bottom of -208 px so that the blue div overlaps the map.
Set the required z-index so that the blue box is above the map.
-Cheers...!!
EDIT: I didn't realize you site until your edit. You should go for a position: absolute in your .date-contact style. So, my recommended code won't apply here. But you can benefit the explanations I hope.
First of all, you cannot use margin: 0 auto with position: absolute. And using classes in a seperated css file, instead of using inline styles, always help you to see your code clearly. With this seperation of concerns, you'll also be applying the DRY principle in your code.
I tidied up your code to provide your desired effect. Please see and if you'll have questions, fire away. Will try my best to help.
HTML
<div class="outer-div">
<div class="date-contact">proba</div>
</div>
CSS
.date-contact {
width:300px;
height:150px;
background:blue;
margin: 0 auto;
}
.outer-div {
text-align:center;
margin:100px auto;
padding:0 10%;
}
NEW ANSWER FOR EDITTED QUESTION
The other answers say that you should absolutely position your blue div. I say if you do that you'll never make it show in the center. The easy way of doing this, is to place your blue div in another div which is positioned absolute. Your blue div will show in center just like you wanted with margin: 0 auto; Also, I placed your blue div inside the div#huge_it_google_map1 because I believe it's where it belongs.
HTML
<div class="yourMapDiv">
<div class="outer-div" id="huge_it_google_map1">
<div class="date-contact">proba</div>
<!-- Your other divs and map contents inside the div#huge_it_google_map1 -->
</div>
</div>
CSS
.yourMapDiv {
position: relative;
background-color: yellow;
padding: 10px;
}
.outer-div {
position: absolute;
top:0;
left:0;
width:100%;
text-align:center;
background-color:red; /* Remove this attribute to see your map div (yellow) */
}
.date-contact {
background-color:blue;
width:300px;
/*height:150px;*/
margin: 0 auto;
/* or "margin: 50px auto 0" if you like to give a little margin-top for 50px */
}}
For your convenience, this is the working fiddle.
I hope you achieve what you wanted.
Blue div has position : absolute. For centered displaying you need to use left and top:
left: 50% - width block( example 40%)
top:50% - height block( example 40%)
I have som problems, regarding Max-width and Absolute Positioning.
In the top of my site, I have a '100%-width section' with a background-image.
I want a small image partly covering the bottom of the top image. To do so, I use Position:relative on the section (top image) and position:absolute on the small image. So far so good..
My problem is, that i want the small image to be centered and have a max-width, so it aligns to the content on the site. (Which have a max-width of 500px..)
I really can't figure out, how to do it...
So, is there a way to only affect vertically, when using position:absolute, or maybe something else i can do?
I hope it makes sense.. :)
screens:
http://cvdmark.com/images_help/screens.jpg
<body>
<section id="img_heading">
<img src="#">
</section>
<section id="content">
<ul>
<li>
</li>
</ul>
</section>
</body>
body {
width:100%;
min-width:100%;
background-color:#000;
float:left;
}
#img_heading{
width:100%;
min-width:100%;
height:150px;
margin-bottom:6em;
background:url(../img/heading_img_test.jpg);
background-position: center center;
float:left;
position:relative;
}
#img_heading > img{
width:90%;
height:100px;
position:absolute;
bottom:-75px;
margin: 0 auto 0 auto;
max-width:500px;
/*left:5%;*/
background-color:#F69;
}
#content{
width:90%;
margin: 0 auto 0 auto;
max-width:500px;
}
#content ul{
width:100%;
list-style-type: none;
}
#content ul li{
width:100%;
float:left;
margin-bottom:30px;
}
JS Fiddle : http://jsfiddle.net/rpatil/ukKgx/
I think what you'd want is to align an absolute position div to the bottom of the section and center it.. (this following assumes you have your content in the section centered too..) replace div with img if you want to and give it your required id.. I ve given "foo-id"
div#foo-id
{
position: absolute;
bottom: 0px; /*since you want it at the bottom of section*/
z-index: 2;
width:90%; /*since your asked for 90%*/
max-width: 500px;
/*the following to center your image*/
margin-left:-45%;
left:50%;
}
Believe that helps!
And here is an updated jsfiddle.. thanks #rubyist..
http://jsfiddle.net/ukKgx/2/
This is an other solution to make it centred --> jsFiddle
<section style="position: absolute; left: 50%;width:50%">
<div style="position: relative; left: -50%;background-color:#ccc; border: dotted red 1px;width: 90%;max-width:500px;height:150px">
</div>
</section>
If you want to make it more custom, you have to use Javascript onLoad page to calculate screen width % picture width
here is the layout im trying to achieve.
http://i.imgur.com/kA0yw.jpg
I have a repeating swatch of the background that is set to the html's background so the grey paper tecture repeats beyond the design.
Then i Have the bamboo illustration that goes on top of that set to the background of the body.
I cant seem to get the bamboo to not be cut off to where the content ends.
What is the best possible way to do this?
the white content div in the center needs to extend down to at least the bottom of the page, and i cant for the life of me figure this out it seems like it has to be the simplest thing to do
this is what it looks like now- http://i.imgur.com/55dPe.png
here is the code
<html>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
</div>
</body>
</html>
and the css
html{
background:url(images/background_swatch.png) top center;
}
body{
margin:0 auto;
background:url(images/background.png) top center no-repeat;
}
div#wrapper{
margin:0 auto;
width:800px;
background-color:#FFF;
border-left:5px solid black;
border-right:5px solid black;
}
#header{
margin:0 auto;
position:relative;
top:25px;
background:url(images/navigation_banner.png) no-repeat;
width:850px;
height:150px;
left: -25px;
}
I'm confused as to what you want to change...Could you post your code?
or which do you want to extend, because it seems to me like the bamboo picture is all the way down, if you want it further, maybe stretch it further (height:120%;) ??
You need to set height 100% on html container, min-height on body container.
http://jsfiddle.net/5FwGZ/
html {
height: 100%;
background-image: url('http://imjustcreative.com/wp-content/uploads/ImJustCreative-2010-08-23-at-06.06.01.jpg');
}
body {
min-height: 100%;
width: 100%;
background-image: url('http://www.landscapecreationsfl.com/flower-dahlia-pink-transparent-background-350_1_.gif')
}
div#content {
height: 400px;
width: 600px;
margin: 0 auto;
text-align: center;
background: white;
}
I'm finally trying to do away with tables and use CSS.
I have 3 DIVs that make up a three layered layout: header, body and footer. I'm now trying to overlay a 900px wide DIV on top of these layers, center aligned, which will hold some of my content and navigational buttons.
These are the 3 layers:
And this (done in Photoshop), is what I am trying to achieve but transparent to the eye:
My 3 base layers are coded like this:
<div id="main" style="width:100%; z-index:1; position:relative;">
<div id="header" style="width:100%; height:175px; text-align:center; background:#151515; z-index:1;"></div>
<div id="contents" style="width:100%; height:400px; position:relative; background:#FFF; z-index:1;"></div>
<div id="footer" style="width:100%; height:200px; position:relative; background:#151515; z-index:1;"></div>
</div>
I did manage to get a new layer to sit on top but it wasn't center aligned. Could somebody please point me in the right direction?
Somehting like this could help:
JSFiddle: http://jsfiddle.net/DSH5J/
Add:
<div id="square"></div>
#square {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:0 auto;
margin-top:50px;
width:80%;
height:100%;
background-color:#333;
z-index:10;
}
Set the width and set margin-left and margin-right to auto. That's for horizontal only, though. If you want both ways, you'd just do it both ways.
margin-left:auto;
margin-right:auto;
Easiest way that I know of to centre a div of known width is to give it the following styles:
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
"Putting my money where my mouth is": http://jsfiddle.net/YVmBU/2/
HTML:
<div id="main">
<div id="header"></div>
<div id="contents-box">
<div id="contents">
<p>Some text</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
</div>
</div>
<div id="footer"></div>
</div>
CSS:
#main {
}
#header {
position: relative;
height:100px;
background:#151515;
z-index: -1;
}
#contents-box {
border: dashed grey 1px; /* for understanding only, remove it in the end */
z-index: 1;
margin-top: -30px;
margin-bottom: -30px;
/* TODO: address min-height; try only one line of text. */
/* fixed height would work too, but would not let the box stretch dynamically */
}
#contents {
width: 75%;
height: 100%;
margin: 0 auto;
background: grey;
z-index: 1;
}
#footer {
position: relative;
height:75px;
background:#151515;
z-index: -1;
}
The only problem is with few text content: if min-height is used on #content, then the grey background does not stretch when there is few text; if a static height of N px is used, then the box does not stretch dinamically.
But if the two black bars merging when there is few content is not important, then ignore it.
Remove the grey dashed border and grey background; those are helpers - to know where each box is and understand what is happening.
By the way, the position: relative needs to be there on the z-index: -1; layers, otherwise the background does not go under. Read on position: this is because things in html have position: static by default, and z-index relies on position for its behaviour.
You can read about this in this page: http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
The only problem is with few text content: if min-height is used on #content, then the grey background does not stretch when there is few text; if a static height of N px is used, then the box does not stretch dinamically.
But if the two black bars merging when there is few content is not important, then ignore it.
please see the attached wireframe. I'm using blueprint css. I want the every thing except the header to be in a 980px container.
For the header, I would like the left column to be fluid. Always growing to touch the left of the browser. How can you build a container, that has a header that is fluid on only one side?
I hope the wireframe helps explain the problem. If not please let me know. Thanks
Not sure if I have interpreted your question correctly, but I think the only way to do this is playing around with the z-index of the container and banner area.
For example, your CSS would be:
body { margin: 0; }
#container { width:980px; margin: 0 auto; z-index: 1; background-color: black; height:500px; }
#logo { width:200px; height:50px; background-color: red; }
#header-left { position: absolute; top:0; left:0; height:50px; width:50%; z-index: 0; background-color: red; }
Then for your HTML:
<div id="header-left"></div>
<div id="container">
<div id="logo"></div>
</div>
Hope this helps.
Let me see if I'm right, you want your header always to be on the top and left corner right and not affect containers position? Well why don't you just take that header out of your container, make sure your body margins are set at 0 so you header actually is completely at the top and left corner of the document and make your header have absolute position.
body {
margin: 0px;
}
.header {
width: 200px;
position:absolute;
}
.container {
width: 980px;
margin:0 auto;
}
<body>
<div class="header"></div>
<div class="container"></div>
</body>