Right now im making a website aimed at kids.

 

As in the screenshot there will be a colorful bar stretching across the webpage at 100%

 

Undearneath I will have 3 divs inside a wrapper div.

 

the logo div and then navagation div

with the content div underneath

 

however I need my starburst image underneath the logo to spread out into the top left corner no matter what screen resoultion and im stuck on working out how to do this

 

heres a screeny:

 

 

Please tell me how you would do this!

Edited October 5, 201114 yr by kingy da killa

First id change the font on the tabs to a more child "friendly" one

 

Google : CSS Scale Background image

Edited October 5, 201114 yr by pandadoodle

First id change the font on the tabs to a more child "friendly" one

 

Google : CSS Scale Background image

 

hmm good idea it is a little hard to read!

 

and that link wont help, i can make a background full size but how getting the starburst to start in the middle of the logo on every screen

If you need it spread to be top left id assume there is already a fixed position form the left no? OR are you simply making it center and want to let the burst grow while keeping the content center aligned?

 

If its a children's site what age are you aiming for because the trick is to let the child navigate the site but make it easy enough for the adult to enter the card details (if its a shop based on the tap in the above image) not many 8 year olds have a credit card or do online shopping

 

Based on that header id recommend looking a bit more into colour theory for children and how they use the web...

Edited October 5, 201114 yr by pandadoodle

comic sans. Kids will love that

 

however I need my starburst image underneath the logo to spread out into the top left corner no matter what screen resoultion and im stuck on working out how to do this

 

You can use it as a body background, and make it in the middle.

 

You need to value center:

body: url{} no-repeat center center;

 

 

But it all depends on the size of the image, if you want a full background you need to coat method, by adjusting the gecko and webkit:

 

html {
        background: url (images / bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

 

hopefully can help

Edited October 5, 201114 yr by amdhas

If you need it spread to be top left id assume there is already a fixed position form the left no? OR are you simply making it center and want to let the burst grow while keeping the content center aligned?If its a children's site what age are you aiming for because the trick is to let the child navigate the site but make it easy enough for the adult to enter the card details (if its a shop based on the tap in the above image) not many 8 year olds have a credit card or do online shopping ;)Based on that header id recommend looking a bit more into colour theory for children and how they use the web...

 

i want the wrapper to be centerd.

 

but the star burst to go off into the left corner

 

i made the shop tab red so its more in your face to the childrens, and i will show examples of the 'chalkies' with big buy now buttons!

 

 

comic sans. Kids will love that

 

yeah that works great

You can use it as a body background, and make it in the middle.

 

You need to value center:

body: url{} no-repeat center center;

 

 

But it all depends on the size of the image, if you want a full background you need to coat method, by adjusting the gecko and webkit:

 

html {
        background: url (images / bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

 

hopefully can help

 

thanks alot i will look into this when coding up!