Results 1 to 10 of 10
  1. #1
    Join Date
    Dec 2006
    Location
    near Atlanta Georgia
    Posts
    194
    Plugin Contributions
    0

    Default Adding a header background image to Responsive Classic template

    I am using v157 and have tried adding a background image to the header of the Responsive Classic Template and can't seem to get it right as it is not showing up.

    I added this code to the very bottom of my stylesheet.css (includes\templates\responsive_classic\css\stylesheet.css):

    #headerWrapper {background: url(../includes/templates/responsive_classic/images/yourheaderimage.jpg) no-repeat; background-position: center; background-size: contain, cover; opacity: 0.6;}

    I uploaded my background image to:
    includes\templates\responsive_classic\images\yourheaderimage.jpg

    I am I using the wrong stylesheet?
    John

  2. #2
    Join Date
    Jan 2004
    Posts
    66,364
    Blog Entries
    7
    Plugin Contributions
    274

    Default Re: Adding a header background image to Responsive Classic template

    You might be specifying the wrong path to the image, since the stylesheet is in the css directory and "../" means "go up one level", so you're basically asking it to look in
    /includes/templates/responsive_classic/includes/templates/responsive_classic/images/yourheaderimage.jpg

    What was the image defined to "before" you made the change?
    What's the URL to see it in action? (it's always helpful to post the URL so we can inspect the page. For example, I'd right-click that part of the page, choose "Inspect" in the browser menu, and see what it's actually looking for in the CSS. I might even look at the "Network" panel of the Inspect window to see what actual path the browser was trying to load, since that will expose pretty quickly whether the path is wrong. Etc.)
    .

    Zen Cart - putting the dream of business ownership within reach of anyone!
    Donate to: DrByte directly or to the Zen Cart team as a whole

    Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
    Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

  3. #3
    Join Date
    Dec 2006
    Location
    near Atlanta Georgia
    Posts
    194
    Plugin Contributions
    0

    Default Re: Adding a header background image to Responsive Classic template

    Quote Originally Posted by DrByte View Post
    You might be specifying the wrong path to the image, since the stylesheet is in the css directory and "../" means "go up one level", so you're basically asking it to look in
    /includes/templates/responsive_classic/includes/templates/responsive_classic/images/yourheaderimage.jpg

    What was the image defined to "before" you made the change?
    What's the URL to see it in action? (it's always helpful to post the URL so we can inspect the page. For example, I'd right-click that part of the page, choose "Inspect" in the browser menu, and see what it's actually looking for in the CSS. I might even look at the "Network" panel of the Inspect window to see what actual path the browser was trying to load, since that will expose pretty quickly whether the path is wrong. Etc.)
    Didn't know that about the "../" meaning, thanks! Regarding the question of the image define I added that line of code to the stylesheet so I don't think it was defined before. It didn't work so I removed the "../" and replaced it with the full path of the image.

    Maybe I am going about adding the image to the header all wrong by trying to do it in the css, maybe I should use php? Reference the domain discountprintingservice.com
    John

  4. #4
    Join Date
    Jan 2019
    Location
    New Zealand
    Posts
    38
    Plugin Contributions
    0

    Default Re: Adding a header background image to Responsive Classic template

    Hi Goldbuckle,
    Try changing the css style from background to background-image and put the full path of the image in, like http: //discountprintingservice.com/includes/templates/responsive_classic/includes/templates/responsive_classic/images/yourheaderimage.jpg
    Watch out for the space in the address after http
    Cheers raptar
    Last edited by raptar; 20 Feb 2021 at 04:03 AM.

  5. #5
    Join Date
    Jan 2004
    Posts
    66,364
    Blog Entries
    7
    Plugin Contributions
    274

    Default Re: Adding a header background image to Responsive Classic template

    Quote Originally Posted by GoldBuckle View Post
    Didn't know that about the "../" meaning, thanks! Regarding the question of the image define I added that line of code to the stylesheet so I don't think it was defined before. It didn't work so I removed the "../" and replaced it with the full path of the image.

    Maybe I am going about adding the image to the header all wrong by trying to do it in the css, maybe I should use php? Reference the domain discountprintingservice.com
    Your stylesheet.css lines 97 and 111 reference #headerWrapper.
    Replace this:
    Code:
    background: url(../images/yourheaderimage.jpg) no-repeat;
    with this:
    Code:
    background-image: url(../images/yourheaderimage.jpg);
    background-repeat: no-repeat;

    And in stylesheet_colors.css line 20 remove:
    #logoWrapper,
    and the following is in there twice, remove both:
    #headerWrapper,

    You might want to explore making your tagline a little more visible with:
    Code:
    #taglineWrapper {
    background: #fff;
    padding: 5px;
    }
    .

    Zen Cart - putting the dream of business ownership within reach of anyone!
    Donate to: DrByte directly or to the Zen Cart team as a whole

    Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
    Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

  6. #6
    Join Date
    Dec 2006
    Location
    near Atlanta Georgia
    Posts
    194
    Plugin Contributions
    0

    Default Re: Adding a header background image to Responsive Classic template

    Quote Originally Posted by DrByte View Post
    Your stylesheet.css lines 97 and 111 reference #headerWrapper.
    Replace this:
    Code:
    background: url(../images/yourheaderimage.jpg) no-repeat;
    with this:
    Code:
    background-image: url(../images/yourheaderimage.jpg);
    background-repeat: no-repeat;

    And in stylesheet_colors.css line 20 remove:
    #logoWrapper,
    and the following is in there twice, remove both:
    #headerWrapper,

    You might want to explore making your tagline a little more visible with:
    Code:
    #taglineWrapper {
    background: #fff;
    padding: 5px;
    }
    Okay I did that and it is still not showing up. When I view the source I search for "yourheaderimage.jpg" and it is not there.
    John

  7. #7
    Join Date
    Dec 2006
    Location
    near Atlanta Georgia
    Posts
    194
    Plugin Contributions
    0

    Default Re: Adding a header background image to Responsive Classic template

    Quote Originally Posted by GoldBuckle View Post
    Okay I did that and it is still not showing up. When I view the source I search for "yourheaderimage.jpg" and it is not there.
    Never mind, its there now that I cleared the CACHE in my browser and the server.

    But its to the far left. Let me see if I can center it up on my own. Feel free to hint in the event I can't get it centered.
    John

  8. #8
    Join Date
    Jan 2004
    Posts
    66,364
    Blog Entries
    7
    Plugin Contributions
    274

    Default Re: Adding a header background image to Responsive Classic template

    You previously had some centering things in there. I didn't mention them, nor tell you to remove them, as they were working fine. But if you removed them then that would explain the change.
    .

    Zen Cart - putting the dream of business ownership within reach of anyone!
    Donate to: DrByte directly or to the Zen Cart team as a whole

    Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
    Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

  9. #9
    Join Date
    Dec 2006
    Location
    near Atlanta Georgia
    Posts
    194
    Plugin Contributions
    0

    Default Re: Adding a header background image to Responsive Classic template

    Quote Originally Posted by DrByte View Post
    You might want to explore making your tagline a little more visible with:
    Code:
    #taglineWrapper {
    background: #fff;
    padding: 5px;
    }
    What line of the stylesheet.css should I put this in or does it matter?
    John

  10. #10
    Join Date
    Feb 2006
    Location
    Tampa Bay, Florida
    Posts
    9,623
    Plugin Contributions
    123

    Default Re: Adding a header background image to Responsive Classic template

    You don't have it yet - you'd have to add it.
    And be sure to simplify your header for mobile - right now everything is smashed together.
    That Software Guy. My Store: Zen Cart Modifications
    Available for hire - See my ad in Services
    Plugin Moderator, Documentation Curator, Chief Cook and Bottle-Washer.
    Do you benefit from Zen Cart? Then please support the project.

 

 

Similar Threads

  1. v150 Header background image not responsive aka. won't scale down
    By OopsIbrickedIT in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 11 Apr 2019, 09:40 PM
  2. v155 ? on Customizing Responsive-Classic template v1.5.5f
    By byakudan in forum Templates, Stylesheets, Page Layout
    Replies: 10
    Last Post: 21 Oct 2018, 10:34 AM
  3. menus for responsive classic template
    By karine in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 27 Jun 2018, 09:26 PM
  4. v155 Classic Responsive Template - file permissions
    By karine in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 25 Jun 2018, 03:54 PM
  5. v155 header image for responsive classic?
    By vvomble in forum Templates, Stylesheets, Page Layout
    Replies: 36
    Last Post: 11 Jun 2016, 10:00 PM

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
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR