Picture background in header – followed instructions, but can't get it to work

  • Resolved peterhjalmarsson

    (@peterhjalmarsson)


    10 years, 3 months ago

    I’ve been searching everywhere in the docs and forums for this now, found tons of examples, but I can get none to work.

    All the tips recommends something like
    header.tc-header { background-image: url('/wp-content/uploads/2014/06/TapasenBarcelona.png') repeat 0 0;}
    However, I get absolutely nothing out of that. Changing the background color with
    header.tc-header { background: #007db7;}
    works fine though.
    I have checked that I can view the picture from https://localhost/donostia.se/wp-content/uploads/2014/06/TapasenBarcelona.png (my site is at https://localhost/donostia.se/ ; sorry, not available outside of my LAN, although I guess I could make that available.)

    I am a newbie at both wordpress and Customizr, but I have checked, rechecked, and checked again, but there must be something I have not quite understood.

    Other CSS changes (I have created a child theme and are making the changes there) seems to work reasonably well. The rest of my CSS is only

    .navbar-wrapper .brand {width:100%; float:right}
.navbar-wrapper .navbar {width:100%; height:50; margin: 0px auto}
.brand.span3 {width: 100%;}

    It centers the logo fine enough, although it does not center the menu, but that’s another post… ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter peterhjalmarsson

    (@peterhjalmarsson)

    I just tried replacing ‘/wp-content/uploads/2014/06/TapasenBarcelona.png’ with https://www.gruposagardi.com/admin/fotos_galerias/2015686865coimptoir%20du%20pintxos%20vascos%20grupo%20sagardi.jpg and that worked well enough. So, something wrong with how WP “picks up” the image from the uploads directory, then.

    I’ve tried moving the pic from the upload/2014/06 directory to directly at /wp-content, with and without the single quotes, tried another pic (a jpg), and all combinations thereof, and no success. ??

    Thread Starter peterhjalmarsson

    (@peterhjalmarsson)

    Just tried to add a the same picture to a regular page – that works fine.

    Instead of using background-image in your CSS, you should use background because you’re trying to pass in all properties at once:

    header.tc-header { background: url('/wp-content/uploads/2014/06/TapasenBarcelona.png') repeat 0 0; }

    If you use background-image, you should only pass in the URL to the image you want to use. See https://www.w3schools.com/cssref/css3_pr_background.asp for more information.

    Thread Starter peterhjalmarsson

    (@peterhjalmarsson)

    @stephencottontail: thanks for the tip, but it makes no difference.

    Note that the code works well with an external image (“https://…”), but at the same time, the “internal” image is visible if I enter the path directly in the web reader (i.e. ” https://localhost/donostia.se/wp-content/uploads/2014/06/TapasenBarcelona.png”)

    I think that is the key information to solve the puzzle?

    While browsing the web earlier today, out of the corner of my eye I saw a link “things to think about if you run on a local web server” (or something similar), but I can’t for the life of me find it again. But it has made me suspect that the issue somehow has something to do with my web server?
    Which is WAMP 2.5 = Apache 2.4.9/PHP 5.5.12/MySQL 5.6.17 which AFAIK is bog standard.

    It would help if you could make your site available, but I can understand if it’s not ready for public viewing. If you know how to use a web inspecting tool like Firebug, you can see the exact path that your site is trying to load the image from. If not, here’s a good quick tutorial: https://www.themesandco.com/snippet/firebug-best-spent-6-minutes/

    In Custom CSS, you will need to use:
    header.tc-header { background-image: url(/donostia.se/wp-content/uploads/2014/06/TapasenBarcelona.png) repeat 0 0;}

    (I think; hard to say on a non-live site.)

    Note that:
    1. The path includes the /donostia.se
    2. There are no single quotes there. These are replaced in Custom CSS, as the text is “sanitised” before it is saved in the database. (You can see this with Firebug / Developer tools easily: they are translated to '.)

    In a stylesheet, you can use the quotes, of course.

    Personally, after reading this article on SEO, I’ll be switching all my links to http links.

    After moving your site live, you’ll need to double check the links anyway, because the odd one always slips through the net, so it’s not worth the extra hassle to make them all relative. I use the Search Regex plugin for find/replace across the site. The plugin makes it a matter of seconds to change https://localhost/donostia.se to https://yourdomain.com throughout your site.

    Thread Starter peterhjalmarsson

    (@peterhjalmarsson)

    Thanks for the help @electricfeet!

    After changing the url to a full path (i.e. ‘localhost/donostia.se//wp-content/uploads/2014/06/TapasenBarcelona.png’) it works well. Of course, I should have tried that much earlier, but I guess I was just following every code snippet I saw without thinking :-(.

    I guess there still some issue lurking here, but I’m happy to skip that for now and go on and design my header instead, so I’ll mark this as solved.

    On your other comments:
    1. http links vs relative: there’s very little I can do about that anyway, since it’s embedded in the tool and theme (but they seem to do alright when looking at the produced code), but for whatever’s in my own css, it makes a lot of sense, and I’m happy to change it when I migrate/go-live.
    2. Firebug did not really get me anywhere, since there was no mention in the code sent to the client of the image directly – it was only referenced “indirectly” in my css. Good tip though, and I’m sure I’ll be using it in the future.
    3. Making my test site accessible from Internet. I spent a couple of hours trying to move it from my laptop to a home server, setting up the router for port forwarding, etc., with very little luck. Guess I’ll need to have a look at that fairly soon, as a preparation for the real migration if nothing else, so look forward to a post about those issues later in the week. ??

    Put Duplicator on your worklist.

    Brilliant plugin for creating zip Archive for site transfers.

    Free at the moment but I expect that to change at some point.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Picture background in header – followed instructions, but can't get it to work’ is closed to new replies.