I’m newbie in CSS and i have problem when i want to design header like this:
I can create header background but how can i create the light as notice in picture (i mean how to slice this in photoshop). Hope anyone help me!
Hi,
Usually you would create the main background first and then you nest an inner element and place that light-slice in the background of the nested div so that it lays on top of your normal background (for modern browsers you can place multiple images on the same element but for better browser support additional html is the best option). The nested image should be transparent of course so you need to extricate the section from photoshop as a transparent png.
In some cases you may be able to slice the whole background as one image for that section but it does depend on how the main background is constructed or whether its a repeated slice etc.
From the look of it I would just add that highlighted section to an inner element and place it in the background as required. You may even be able to use an existing inner element if the html is suitable.
If you get stuck then upload what you have done and we’ll try to offer some more specific advice.
thanks paul, i think today rare cases use whole background as one image, they usually use repeat property.
Do you think nested div is the best idea?
It depends on the image as some images can’t be repeated as they are not uniform. If the images are uniform then repeating is the way to go.
Do you think nested div is the best idea?
For best browser support then the nested approach is best. You may have a structural element in place anyway as you probably have header or section elements that you can apply the inner background image to anyway.