CSS background-image

Question

I have a landing page with a background image that is showing on locally, but when I push it out live I am unable to see it on the internet.

My file structure is very simple, I have a root folder called runn, and in that folder I have a css folder, an image folder, and etc.

Below is the css for my background image.

body {
    color: white;
    background: #ee6184;
    background-image: url('../images/image_01.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 180%;
    margin: 0; 
    padding: 0;
    width: 100%;
    text-align: center;
}

Answer 1

Look at the browser console (or network), maybe it shows you 404 error for this image. That means your path does not work for the server, and also it can be 403 (forbidden) or other errors.

Also, you can set path as /images/image_01.jpg if the root is not in subfolder like this: domain.com/runn/ .

In other ways please put the link, so I can understand the issue.

Answer 2

usually when debuging an image isn't showing as expected, go chrome console see if there is 404 saying resource can't be found.

background-image: url('../images/image_01.jpg');

that means there is no such file exist in the path u've written in your html. then re-configure the image path or upload the resouces to the correct path.

u can either use relative path in css as you've done in this case

background-image: url('../images/image_01.jpg');

or you can use absolute path in a sever language file such as in php

background-image: url('<?php echo site_url();?>/images/image_01.jpg');