I'm creating a website designed by a print-designer. The background concists of two images:
one gradient that is repeteated along the y-axis and aligned with the bottom of the page
one image that is aligned with the bottom of the page and centered.(the circle)
demo:
The circle-part is pretty big and has most of the pages content on it. (~900px by ~750px).
If the page is to small I need to add scrolls. If the page is to big. I need the first image(vertical) and background-color(horizontal) to fill out the area for me. I would like to use multiple backgrounds, but the site needs IE8-support.
Cut a 1px strip for the gradient and repeat it horizontally on the body. Set the attachment to fixed.
Cut out the circle and place it as the background image of your content container. This will likely be a png with transparency to allow the previous gradient to show through.
CSS
body {
background: url('bg.jpg') center bottom repeat-x fixed;
}
.container {
background: url('circle.png') no-repeat center bottom;
margin: 0 auto;
min-height: 750px;
width: 900px;
}
HTML
<body>
<div class="container">
content here
</div>
</body>
Alternatively, you can use CSS3 to place the gradient and avoid the image altogether. Some older browsers won't support it, but it's a little more flexible than using a static gradient image.
Check out this handy generator - just select the colors and style and it will give you the code: http://www.colorzilla.com/gradient-editor/
Related
I've been beating myself this weekend to get around this one.
I have a site that uses Bootstrap 3.0 and a Carousel with background images, and I've managed to reproduce my question in a small fiddle.
I have a max-heighted div with an image inside. The image will typically be larger than the div (at least in height). I'm using the img-responsive class from bootstrap to make sure that in mobile browsers the image scales down. That is the reason why I max-height the div and don't put a fixed height on it.
My questions is: how can I get the image to vertically align to the middle?
I've tried:
Adding classes display: table and display: table-cell, but a table cell cannot have a max-height.
Aligning things vertically but none seem to work.
Setting a negative margin on the image using javascript, but that makes the div smaller as well as the div uses the image to size itself.
Using css background instead of an inline image. This does not make the div be (at most) as large as the image and doesn't allow responsive growing/shrinking.
Fiddle: http://jsfiddle.net/SabbeRubbish/dZQ26/4/
<div class="carousel-inner">
<div id="frame" class="item active">
<img src="https://www.google.com/images/srpr/logo11w.png"
class="img-responsive" />
</div>
</div>
Can anyone recommend me good and clean ways to get the image to center vertically? Or tell me what the hell I'm doing wrong? :-)
Thanks.
PS: why center vertically? If the page is very wide, there is a large clip area as the image grows with the page. It is nicer to show the middle of the picture rather than the top.
is this something closer to what you are trying to achieve ?
#frame {
border: 1px solid grey;
max-height: 100px;
min-height: 100px; /* Remove this line */
padding: 15px 0px; /* Add this line to always have height on the div */
background-size: cover;
background-image: url(https://www.google.com/images/srpr/logo11w.png);
background-position: center center;
}
http://jsfiddle.net/rrEYJ/
EDIT:
As suggested in the comments you can also use background-size: contain; to have the entire image inside the #frame element. You will probably have to also use background-repeat: no-repeat; in that case.
Check this fiddle: http://jsfiddle.net/rrEYJ/1/
EDIT2:
Based on your comment I did some research and apparently the background-size property can be set in percentages also. Based on this new information see this fiddle:
http://jsfiddle.net/rrEYJ/3/
EDIT3:
The css had a min-height property that's why the div wasn't changing it's height. Check this fiddle: http://jsfiddle.net/rrEYJ/4/
I hope this helps.
Add style for image like this
#frame img {
width:auto;
max-height:100px; }
I basically made a header image for my site and the sides of it have black on it. I want to extend the header so it goes for the width of the user's web browser with black "bars" as if the header extends for their whole browser.
I've tried a few things, but I cant figure this out.
Here's an example of what I have now:
#header {
background: url('img/header.png') no-repeat top center;
height: 131px;
}
#headerbg {
height: 131px;
width:4000px;
background-color:#000;
}
And in the html I just have both in divs and within each other in the html.
Here's a jsFiddle that shows you how to layer the two div's and use background-size property to expand the image so it fits just the same as the background color's width. UPDATE: New jsFiddle above is replaced to include better method for that type of look.
Edit: Here is a different jsFiddle that has places the image inside and centers it, allowing any excess background color from the parent container to show through.
Edit 2: Using the Edit fiddle above, you can apply CSS3/IE gradient effect as shown in this jsFiddle
Status: The solution was to use center center for background-position combined with setting both width and height to 100% for the image used.
If you scroll to the bottom of this page - http://dev.socialadr.com/get/begin06 - you'll see that the white background w/ drop shadow stops near the end.
This is the image file that I want to repeat vertically:
http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif
The CSS file being used is:
http://dev.socialadr.com/_css/css.php
And I believe it's this #page_wrapper id that needs to be modified:
#page_wrapper {
width:1014px;
margin:0 auto;
padding:0;
min-height: 300px;
background: url(http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif) repeat-y center top;
height:100%;
}
I've tried tons of different things, read a bunch of other StackOverflow posts about similar issues but for the life of me I can't get it to work.
Any ideas?
Thanks!
Kane
Try placing quotes around the URL:
background: url('http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif') repeat-y center top;
Your live CSS does not include the repeat-y property given in your pasted code.
Additionally, your image file is very large. Since the image is meant to be tiled, the image height should be the height of one tiling.
You should also break the image up into two pieces and set them as backgrounds on two different elements. Tiling the current image will include the top part of the box with the corners, which is not what you want. Set the corners-only image as the background on one element, then the tile image on another element with repeat-y.
In CSS, we have always been able to utilize the idea of block models to create the whole 'top-middle (tile)-bottom' effect for things like borders, rounded corners, etc. For example..
#top { background-image: url('some-top-image.jpeg'); }
#middle { background-image: url('some-middle-image-that-tiles.jpeg') repeat-y; }
#bottom { background-image: url('some-bottom-image.jpeg'); }
<div id="top"></div>
<div id="middle"><!-- tons of content here --></div>
<div id="bottom"></div>
Not exactly valid code, but it illustrates the concept anyway.
I was wondering if there is a way to encapsulate this kind of logic into CSS3's new ability to do multiple background images in a single style. Such that ..
.content {
background:
// top image - top positioning
// middle image - tiling, offset from top
// bottom image - bottom positioning
}
<div class="content"><!-- Lots of Content --></div>
I have attempted to just type in the estimated values, but it does not seem to come out like I expect. I was wondering if someone with more experience could enlighten me on whether or not this could even be done, and if there are any known examples of it.
Specify the top and bottom images and their positions, then the middle one:
.content {
background: url('some-top-image.jpeg') top no-repeat,
url('some-bottom-image.jpeg') bottom no-repeat,
url('some-middle-image-that-tiles.jpeg') repeat-y;
}
The middle tiling image is declared last so that the top and bottom images will be layered on top of it. Layering of multiple background images is done from the top down. See ยง3.1 Layering multiple background images of the Backgrounds and Borders module for more.
I'm trying to figure out how I can adjust the css in my register.php page so that the gradient will fill the entire area like it does on my login page.
http://www.kansasoutlawwrestling.com/kowmanager/register
http://www.kansasoutlawwrestling.com/kowmanager/login
If you want to use the same background gradient image for both the login & register forms you can modify your CSS rule to position the gradient at the top of the registration box and apply a background color #E7E7E7 so that the bottom of the gradient fades into a solid color. Like this:
.register-style {
background: #E7E7E7 url("../images/login.jpg") no-repeat scroll center top;
}
Alternatively, you can create a taller version of the gradient image and use that in your .register-style class.
The simple answer is "make the gradient image a bit taller".
Alternatively, you can use CSS3 gradients.
http://www.colorzilla.com/gradient-editor/ will generate cross-browser CSS that works in "all browsers".
If you want to cover just the case you have on register.php, try to add these styles:
.register-style {
background-position: top;
}
.register-inside {
height: 276px;
}
.register-data {
padding: 20px 10px 20px 30px;
}
Doing so you'd position the gradient to top, make the block a little smaller so the gradient would fit and make the paddings of the lighter box a little smaller, so it would look better.
Also, if you have control over the register.php HTML, add class="text" to the inputs: they'd gain the same style the inputs on login page have.