SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to create background header with light brush?

    I'm newbie in CSS and i have problem when i want to design header like this:

    55bdf037fa1f6c8995c5c692d30adf52.jpg

    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!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by thehung1724 View Post
    thanks paul, i think today rare cases use whole background as one image, they usually use repeat property.
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •