CODEWITHSUNDEEP
jquerycss
Interfaith
Interfaith

Reputation: 145

Align contents centered on page

I want to center the carousel contents on the page and also have a background which is fixed and changes height/width based on browser resize.

Please let me know how do I accomplish it, from the code i have.

Upvotes: 0

Views: 73

Answers (3)

Paradise
Paradise

Reputation: 470

Since none of above solutions include both vertical and horizontal centering, add this to your ul class, if this is what you are trying to achieve

ul {

 list-style: none;
 padding: 0;
 margin: -15em 0 0 -31em;
 width: 62em;
 height: 30em;
 background-color: #0C0C0C;
 top: 50%;
 left: 50%;

}

For full resizable background I'll go with FrontEndJohn solution, just keep in mind to add min-width and min-height to body so your image don't stretches too much

Upvotes: 1

JohnDevelops
JohnDevelops

Reputation: 567

Add

text-align:center;

to the body and remove 

left:50%;

from the ul, that will center the roundabout.

As for the background image, you can set a div to 100% width, position absolute, top and bottom 0px with an image set to 100% width to dynamically scale however for a better CSS3 approach have a look on csstricks.com, there is a very good tutorial on it there.

http://css-tricks.com/perfect-full-page-background-image/

Upvotes: 1

Dan Barzilay
Dan Barzilay

Reputation: 4993

For centering it delete the left: 50%; on the ul css.

For the background use this css:

body
{
    background-image: url('replaceme');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;

}

and replace replaceme with the image you want.

Note: the background css has some css3 artibutes that may not work in older internet explorers, if you dont want to use css3 consider using this site: http://www.quackit.com/html/codes/html_stretch_background_image.cfm

Upvotes: 1

Related Questions