I am currently haven issues displaying the background img of my site. the problem is probably in my css but caused by the layout of my html.
In order to show a navbar on each page without duplicated code, i simply let my controller parse a navbar file and a content file.
the navbar.html has a layout of
<html>
<body>
//navbar code
</body>
</html>
while the content file have a layout of
<html>
<head>
//head code
</head>
<body>
//body code
</body>
</html>
i parse this from the controller using
$this->parser->parse('navbar', $data);
$this->parser->parse('content', $data);
which leads to a final source code of
<html>
<body>
//navbar code
</body>
</html>
<html>
<head>
//head code
</head>
<body>
//body code
</body>
</html>
Now i got the image responsive on all pages without header with this css
html, body{
//make body fill entire page
width: 100%;
//height: 100%;
margin: 0;
background:
/* top, transparent black, faked with gradient */
linear-gradient(
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.4)
),
/* bottom, image */
url("http://webapps.groept.be/a15_web01/img/wallpaper.jpg");
/*make sure background image is responsive*/
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
The pages where i load both the navbar and content now put the body at height:100% which ofcourse means that the content overlaps the navbar.
Is there a way to adjust the css for this? or does anyone know a better layout for the navbar issue?
Ok i found it, i'll quickly list the useful answers as an overview.
Removed <html> and body tags from navbar file
changed css to only work on the html tag
added css: body{ background-color: transparent; }
anyway, thanks for the help guys
Related
I have a problem in bootstrap/css. I want to load image from source folder and I typed in css this code:
background: url('../img/home.jpg') no-repeat;
But it doesn't show in my home section on the page.
https://codepen.io/write/image-not-loading
Perhaps try
background-size: cover;
Or as ZohirSalak CeNa said, resizing your element that is containing the background image unless it is your body.
HTML
<html>
<head>
<title>Your Title</title>
</head>
<body class="your-class">
</body>
</html
CSS
.your-class {
background-image: url('../img/home.jpg') no-repeat;
background-size: cover;
}
Also, Make sure you have the correct path to your image
I am using a page with HTML body and some property associated with body defined in the head section. while Executing the page image is rendering sometime and sometime not.
<head>
<style type="text/css">
body {
background-image: url('Assets/Img/bg2.jpg');
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
</style>
</head>
body section
<body class="signup-page">
<div id="content"></div>
</body>
What is the issue Exactly? Any idea would be appreciated.
Been writing code for the background of a website. The goals are 1) 100% height of the browser window for the first image 2) image stays centered in window and sides are cut off 3) on the home page there is also two additional images that need to have the same effect. Been trying and writing different code chunks and not getting anywhere. I can get one part which just breaks another. Thank you for any assistnaceCurrent code chunk is as follows:
<html>
<head>
<meta charset="UTF-8">
<title>Background Image</title>
<style>
* { margin: 0; padding: 0; }
.background {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div class="background">
<img src="images/bg.png">
</div>
<div class="background bg2">
<img src="images/bg2.png">
</div>
</body>
</html>
Not sure if I fully understand what your question is but for your image to get the height of the window you need to
.background {
background-image: url(images/bg.png);
height: 100vh;
}
That way the background image will always use the full height of the viewport. Not sure about the rest of the question tho!
If I understand what you are trying to do, there are a few things with your code that is wrong. First I will explain a couple of things and then I'll provide the code that I came up with that works when I tested it. Here goes...
First, in your style element, where you have ".background:", you don't need any of the code that you wrote. The stuff that mentions webkit, moz, etc. is really for stuff that may have cross browser compatibility problems. background-size is not one of those things you would have to worry about with that. The only thing I would put in your "background" class is width and height of 100%.
Second, speaking of width and height, I would include and "html" and "body" element and give them both a width and height of 100%.
Third, you are trying to have your images listed in your html, but you are trying to style them as if you are having your css produce them. Notice how in my html I left the "background" divs empty and then included the url of the photos in the css.
In a nutshell, I believe you may be a little confused as to what method should be used and when/where, because you are actually fusing different approaches together. That said, here is the code I wrote...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background Image</title>
<style>
* { margin: 0; padding: 0; }
html, body {
width: 100%;
height: 100%;
}
.background {
width: 100%;
height: 100%;
}
#bg1 {
background: url(images/bg.png) no-repeat center;
background-size: cover;
}
#bg2 {
background: url(images/bg2.pngg) no-repeat center;
background-size: cover;
}
</style>
</head>
<body>
<div class="background" id="bg1">
</div>
<div class="background" id="bg2">
</div>
</body>
</html>
Here is a link that may help you too. They have great directions, exercises and tutorials: w3schools.com
Hope all of that helps Zack! :)
I've seen these answers already: this, this, this and this.
But it didn't help.
My program is here: http://jsfiddle.net/nav9/6VeB7/9/
Two questions:
1. Does it make sense to have such background code placed within the html tag or the head tag instead of inside the body tag?
2. How do I get a gradient over the background image? It works fine when I place the background image in the html tag and the gradient in the head tag, but I want both in the same tag.
The CSS:
body
{
width: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
/*background: radial-gradient(rgba(45,255,27,0.8), rgba(255,162,12,0.87), rgba(14,12,12,1));*/
background: radial-gradient(rgba(45,255,27,0.8), rgba(255,162,12,0.87), rgba(14,12,12,1));/*, url("images/starTile.png") repeat;*/
background-image: url("images/starTile.png") repeat;
position: fixed;
}
The HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<link rel="stylesheet" type="text/css" href="Styles.css">
</body>
</html>
UPDATE:
This is the reason it's not a duplicate: I'm trying to repeat the starTile, and the gradient doesn't work when I use repeat. But if I use no-repeat, I can see the gradient as well as a single starTile image.
body
{
background-image: url('images/starTile.png'), radial-gradient(rgba(45,255,27,0.8), rgba(255,162,12,0.87), rgba(14,12,12,1));
background-repeat: repeat, no-repeat;
background-position: left center, left top;
background-size: auto, 100% 100%;
}
Hi Please do not bash on me or give me negative vote because I really did spend the time and trying to find the answer. From what I searched, this is what I have. I am trying to make a background image as my body but when I put no repeat on, it just a single tile rather than it stretching. Ive been trying to find a code that will stretch it out but nothing is there. I tried youtube and tried looking on here
this is my code
body{
background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA);
background-repeat:no-repeat;
}
my HTML
<html>
<body>
<div id="container">
</div>
</body>
</html>
Embedded Demo
jsFiddle Demo with code
A better approach than using the body element would be to place a div that does this for you.
<head>
<style>
#background{
background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA);
position:fixed;
right:0;left:0;top:0;bottom:0;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="bacgrkound"></div>
</body>
This will work:
body {
background: url((https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA) no-repeat;
background-size: 100%;
}
body {
background: url((https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA) no-repeat;
background-repeat:no-repeat;
background-size:cover;
}
This will cover your screen.
http://jsbin.com/IJObemU/1/
body{
background: url(image.jpg) no-repeat center center fixed;
background-size: cover;
}
you can remove the fixed when you need to make your background cover bot not on the body element (if you're applying the background on some element that scrolls with the page).