I have a laravel 5 project where I want to set and custom an image as background, but I simply can't. I can set the background to a color - that works fine, but not when I'm using an image...
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
<style>
body{
background: url("/resources/assets/images/anders.png") no-repeat;
}
</style>
</head>
<body>
#yield('content')
</body>
</html>
Root the url to the site using . before the resource.
body{
background: url("./resources/assets/images/anders.png") no-repeat;
}
Related
I'm new to HTML and CSS, I'm trying to add Full Screen Background Image in CSS, but my code doesn't work. I've tried many tutorials as well. Here it's my code.
HTML file
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\practice.css">
<h1>Welcome to my First CSS page.</h1>
</body>
</html>
and CSS file
body{
background-image: url(""C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\landscape.jpg"");
background-size: cover;
background-attachment: fixed;
}
The problem with your double-quotes in the URL you should remove them. Also, you can use a relative path to get your image from your project path.
Here a working example, you made one mistake & one bad practice:
- You used double """" for your background URL
- The CSS link is recommended to be in the head. You can put it in the body but place it add the end.
body{
background-image: url("C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\landscape.jpg");
background-size: cover;
background-attachment: fixed;
/* DEMO, remove */ background-image: url("https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg");
/* DEMO, remove */ color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<!-- comment out -->
<!--<link rel="stylesheet" type="text/css" href="C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\practice.css">-->
</head>
<body>
<h1>Welcome to my First CSS page.</h1>
</body>
</html>
style="background-image: url('img_shirjeel.jpg'); height: 100%; background-position: center; background-repeat: no-repeat;background-size: cover;"
try this in that tag or body where you want the image.
and do google first.
You need to move your css file to the main folder (the same as the html file).
And create a div(container were background has to come) that contains your h1.
And you shouldn't use the full url you can just use foldername/imagname.jpg.
So this is how it should look.
Folder.
-html.html
-practice.css
-imagefolder
--image.jpg
If you have this you can change the css link to :
<link rel="stylesheet" type="text/css" href="practice.css">
And then in body tag you creat a div with a class:
<div class="body">
<h1>Welcome to my First CSS page.</h1>
</div>
If you have this you can give the body div a background image with in css:
.body{
background-image: url(image/landscape.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 500px;
}
This question already has answers here:
Adding external CSS in an HTML file
(5 answers)
Closed 2 years ago.
So I tried displaying an image by making a selector class with a background-image attribute then calling it using the <div> tag. The first time the selector class was between the <head> tags. Everything seems to work fine:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
margin: 0;
}
.bg {
/* The image used */
background-image: url("images.jpeg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
But when I put the selector class inside a separate CSS file, it doesn’t seem to work. Here is the code for the HTML file:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
margin: 0;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
Here’s for the CSS:
.bg {
/* The image used */
background-image: url("images.jpeg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-size: cover;
}
Could someone please kindly tell me what I did wrong? I thank you in advance!
Don't forget to import your separate css file on your html page :
<link rel="stylesheet" href="style.css">
And be careful for the right path.
Add a link tag inside of head in your HTML to connect your styles to the HTML.
<head>
<link rel="stylesheet" href="xxx.css">
</head>
Replace xxx.css with the path to your css file.
Check the Mozilla docs for details.
This piece of code in a file called index.html just sets the background of the page to be light blue.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body
</body>
</html>
When I put it in a file called stylesheet.css in the same directory however, and link it using an href, the background remains white. Here is the html and css files:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body
</body>
</html>
stylesheet.css:
<style type="text/css">
body {
background-color: lightblue;
}
What's going on here? How come it doesn't work the same way?
In an external stylesheet, you don't need the <style> tag. So, the contents of your external stylesheet should simply be
body {
background-color: lightblue;
}
This is the first time I am making a mobile application. I am using Dreamweaver. The background image is not being displayed.
HTML
<!doctype html>
<html>
<head>
<style type="text/css">
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body class="main-page">
</body>
</html>
CSS file
#charset "utf-8";
/* CSS Document */
body.main-page
{
background-attachment: fixed;
background-image: url (images/home_main.jpg);
background-repeat: no-repeat;
}
Delete the space between the url value and the parenthesis:
background: url("Your url");
Here's a DEMO with the above CSS rule: Fiddle.
Instead of:
background: url ("Your url");
And here's a DEMO with this other CSS rule: Fiddle.
Here's what I did:
.bodyimage {
background-image: url('px_by_Gre3g.png');
background-repeat: repeat;
}
However, if I try to put any element such as p, h1, h2, h3 etc. it doesn't show at all.
here is my code:
<!DOCTYPE HTML>
<html>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css">
<meta charset="UTF-8">
<head>
<title>Dave's Website</title>
</head>
<body class="bodyimage">
<p><b>test</b></p>
</body>
It's nothing much, just a simple website. I'm not sure why it won't show at all. Can someone help?
Your link and meta is out of the head, which isn't valid. Try like this:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css">
<meta charset="UTF-8">
<title>Dave's Website</title>
</head>
<body class="bodyimage">
<p><b>test</b></p>
</body>
</html>
Use validator to check your markup.
JSBin with a different background-image.
Is your image transparent or partial transparent which caused the text not visible?
Try to change the font color to white or to black, and work from there.
Refer the following site for more information on images and font.
http://www.w3.org/wiki/CSS_background_images
To add body background in Twitter Boostrap I add background: url(../img/bg.png) repeat 0 0; to
body {
margin:0;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:20px;
color:#333;
background-color:#fff;
background: url(../img/bg.png) repeat 0 0;
}