CODEWITHSUNDEEP
htmlcssbackground
Brandon
Brandon

Reputation: 9

When I try to get a background on my website with css/html it wont show the background

I'm trying to get a background on my website BJBGaming1.com, and i have this

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BJBGaming1</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet"
href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
</head>
<body>

and if you look i have the css/main.css part which has this for code

html {
min-height:100%;
min-width:100%;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
} 
body {  
background-image:url('../img/background.png');
background-repeat:no-repeat;
background-size:cover;
}

and i have an image that matches the name background.png that is 1 folder back and into the img folder so i have the ../img/background.png but the background still wont show, somebody please help.

Upvotes: 0

Views: 108

Answers (2)

certifiedmay
certifiedmay

Reputation: 11

Using Chrome developer tools, I can get your image to display using 

body { background-image: url('../img/background.png') !important; }

and

body { background-size: 100% !important;} will work

or body { background-size: cover !important; } worked as well.

Upvotes: 0

khairul.ikhwan
khairul.ikhwan

Reputation: 527

You can try to use !important to the background-image because foundation.css is already override your background image to #fefefe

html {
    min-height:100%;
    min-width:100%;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
} 
body {  
    background-image:url('../img/background.png') !important;
    background-repeat:no-repeat;
    background-size:cover;
}

OR

You can also load your main.css file after foundation.css

<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css">

Upvotes: 1

Related Questions