How to display a background image with css/php

Question

This might be easy for some of you but it hasnt worked for me so I will ask it anyway.. I have a header file in php...that has a bookstore name in it...right now I have the name of the bookstore appearing after the image.Well I want the image to be the background of the bookstore name..so obviously I have to use background-image.. I have tried adding background image in my header in css and it's not working and am sure am getting the path right...I have even tried to move the image to default folder where my html is but its not working..obviously am doing something wrong so help me please... here is my php header file(I have commented out the image in the header so it doesn't show).

<html>
<head>
    <meta charset="UTF-8">
     <title><?php echo $pageTitle; ?></title>
     <link rel="icon" type="image/png" href="images/book.png">
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<?php echo $description;?>">

<link rel="stylesheet" href="css/main.css">
</head>

    <body>
 <header id = 'header'>


 <!--<img src='images/bannercut.jpg' id='banner' alt='Bookstore Banner'>-->
  <h1>Gabby's BookStore</h1>


  </header>

Here is my css

     header{
background-image: url('bannercut.jpg');
  }

In css try putting full URL of image... Just to confirm. After that you can figure out image location related to css location. Try inspect element where you can edit html code without having to check n change css/php file n reload every time. — user769889
– user769889, Commented Oct 2, 2016 at 22:10
I have tried that it's not working..inspect element makes it easier for me to test though..thanks for that ..I will also try inline styling and see why that works — Will Barangi
– Will Barangi, Commented Oct 2, 2016 at 22:31
your stylesheet should reference #header since it's by ID , if it were a class, then .header — Duane Lortie
– Duane Lortie, Commented Oct 2, 2016 at 22:41
You have two errors, your CSS is wrong and your URL is wrong too. @Johannes has the correct answer you need. — Michael
– Michael, Commented Oct 3, 2016 at 1:58

Johannes · Accepted Answer · 2016-10-03 01:56:17Z

3

EDITED (typos...)

It's the filepath and the selector:

 #header{
     background-image: url('../images/bannercut.jpg');
  }

header is an ID, so it needs the # in the selector and if your css file is in a folder named css, you first have to go out of the folder (with ../) and then into the images folder in your filepath, resulting in ../images/bannercut.jpg.

edited Oct 3, 2016 at 1:56

answered Oct 3, 2016 at 1:21

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leo L. · Accepted Answer · 2016-10-03 00:20:08Z

Based one what I see. It looks like you didn't write some stuff down correctly. Let me explain: When you give something a id, you just write down <header id = "header"> remember when you write it that you have to put quotes "" around it not single quotes ''.

Also, when you state an ID in CSS, you have to put a # before the ID name. For example:

#header {
/* your code here */
}

Also. When you stated your background image's link. You have to put quotation marks around it "" not single quotation marks ''. For example:

background-image: url("banner cut.jpg");

Basically, to fix your code, all you have to do is change the header tag in CSS to

  #header{
background-image: url("Funny Background.png");
color: white;
}

and then change the HTML header id to

 <header id = "header">

ALSO. MAKE SURE TO PUT IN CLOSING TAGS!! You forgot to write at the end of the code.

Good luck :D

user5781994 · Accepted Answer · 2016-10-03 00:53:25Z

0

Try this:

header#header {
background: url(bannercut.jpg);
}

Or:

header#header {
background: url(images/bannercut.jpg);
}

you should add the id of it after u specify header and remove the ' from in the url and remove -image from behind background and

answered Oct 3, 2016 at 0:53

user5781994

Comments

Ferrius · Accepted Answer · 2016-10-03 01:33:38Z

0

Try adding this to your code

<?php
   $background_url = " //Your URL goes here ";
?>

<style>
   header{background: url( <?php echo $background_url ?> );
</style>

answered Oct 3, 2016 at 1:33

Ferrius

698 bronze badges

Comments

Hossein Razavi · Accepted Answer · 2020-04-12 19:15:06Z

0

you should insert style in original file

example:

<style>
.header {
    background-image: url(<?php echo $headerImgUrl; ?>);
}
</style>

answered Apr 12, 2020 at 19:15

Hossein Razavi

436 bronze badges

Collectives™ on Stack Overflow

How to display a background image with css/php

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related