SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    May 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div with dynamic background img and text on top

    Hello.

    *Disclosure--I'm really not that knowledgeable with css so any help on this is much appreciated.

    I'm trying to get this example-comp.jpg effect (see attached jpg) as my masthead on pages within my Virb site http://thatguy.virb.com/featured

    However, the page description is dynamically changed using Virb's admin and I don't know where to begin to change the description CSS to get it to look like this.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Hi Persistent1. Welcome to the forums.

    If you have access to the CSS rules, try adding in something like this:

    Code:
    h1 {
      position: absolute; 
      color: white; 
      padding: 100px 150px; 
      border: 3px solid white; 
      left: 60px; 
      top: 60px;
      font-weight: normal;
    }
    Last edited by ralph.m; Jun 1, 2012 at 17:31.

  3. #3
    SitePoint Member
    Join Date
    May 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph.m. Thanks!

    This styles the heading text, but how do I get it to go over the image?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Have you tried the code? It should sit over the top of the image, as in your screen shot.

  5. #5
    SitePoint Member
    Join Date
    May 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Have you tried the code? It should sit over the top of the image, as in your screen shot.
    Yes. And it threw off the other h1 on the site. I setup a custom class for it and now it looks great http://thatguy.virb.com/featured#

    Thanks so much!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Great. I'm sorry I didn't provide a way to stop that happening on other pages, but glad you figured it out. That's more satisfying anyway!

  7. #7
    SitePoint Member
    Join Date
    May 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Great. I'm sorry I didn't provide a way to stop that happening on other pages, but glad you figured it out. That's more satisfying anyway!
    No worries. Thanks again!


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
  •