Background-image with linear-gradient on body not showing with Bootstrap - html

So I've been searching for a bit why my background is not showing up, ill start with my bg css:
body {
background-image: linear-gradient
(to right, #0F2027, #203A43, #2C5364, #2C5364, #203A43, #0F2027) !important;
}
When I inspect element my html and body both have a width of 0px which is why it's not showing I guess.
I use Bootstrap 3 and removing it from my page does fix the issue but I use Bootstrap for a lot so that doesn't really work for me.
One cheap fix I use currently is creating a span inside the body tag with a single character and then making it's opacity 0 and hiding it in a corner but obviously this should only be temporary.
I've tried background-color which does work so I'm guessing there is some conflict between Bootstrap 3 and background-image or linear-gradient.
Does anyone know of a proper way to fix this issue?
EDIT: As pointed out in the comments, I realize if the body width is 0px it can't show my bg but what's causing my body width to be 0px?
EDIT2: Added HTML for reproduction:
<!DOCTYPE HTML>
<htmL>
<head>
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/mycss.css" />
</head>
<body>
</body>
</htmL>

What is causing this behaviour is the rule margin:0 from normalize.less.
If you set the margin of the body to any value except 0, the background-image will render.
body {
margin: 1px;
background-image: linear-gradient(to right, #0F2027, #203A43, #2C5364, #2C5364, #203A43, #0F2027);
}

You just need to remove a space after "linear-gradient". This css property should be written like this linear-gradient() and in the brackets you can put your code. The overall code should be like below.
body {background-image: linear-gradient(to right, #0F2027, #203A43, #2C5364, #2C5364, #203A43, #0F2027) !important;}

Related

Linear Gradient in CSS [duplicate]

This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed 1 year ago.
I have been learning CSS and I was trying the
linear-gradient().
This works fine when I use "to right".
background-image: linear-gradient(to right, #92EFFD, ##4E65FF);
My actual code is:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-image: linear-gradient(to right, #92EFFD, #4E65FF)
}
</style>
</head>
<body>
</body>
</html>
But when I remove "to right" it's like:
background-image: linear-gradient( #92EFFD, #4E65FF);
My actual code in this case:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-image: linear-gradient(#92EFFD, #4E65FF)
}
</style>
</head>
<body>
</body>
</html>
The out put is this.
What I wanted is to set the linear gradient top to bottom but it is not working
Am I doing wrong anywhere or my code is wrong. Can you help me out?
To set gradient position you can simply use "deg" you can open inspect element in your browser to adjust according to your requirement.
Default position is top to bottom
background-image: linear-gradient(#92EFFD, #4E65FF);
background-image: linear-gradient(180deg , #92EFFD, #4E65FF);
Try this tool if you want, I usually pick it for the CSS gradients and it helps me a lot!
https://cssgradient.io/

The background picture don't shows up

I tried all possible answers but nothing works. When I put this code
I have a gray screen only. The picture is in the same folder which I use for code. I use notepad. I am a beginner.
I've tried all your answers but nothing works only gray screen. The image works when I put just src=(image.png) but not working if I want a background with URL(image.png)
You'll need to add the body tag, like so:
<html>
<head>
<title> Piotr#Ewa World </title>
<style>
body {
background: url("IMG_20180505_204226.png");
background-size: contain; /* Or "cover" */
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>

Why won't my background image show at all?

I've looked for the answer on everyone of questions that are similar to this question but nothing seems to work. Basically I created a test document to test the background image feature as it wasn't working on my main site.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" text="type/css" rel="stylesheet">
<title>Test</title>
</head>
<body>
This is a test.
</body>
</html>
CSS:
body {
background-image: url(image.jpg) no-repeat;
}
Nothing shows apart from "This is a test." I have checked to see if the image is in the same place as the styles.css sheet, and it is. Can anyone help me please?
You can't combine background-repeat in background-image.
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
}
Use background background instead of background-image if you are using no-repeat etc.
body {
background: url(image.jpg) no-repeat;
}
According to W3 http://www.w3schools.com/cssref/pr_background-image.asp background-image property can be attached to the body tag.
The only reason you don't see it is no-repeat in the wrong place - it is the property of background itself, not a background image.
So here is the code you should use case you actually do not want to see image repeating:
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
}
your image url is important to give it:
I hope solved with this.
1- in own folder: "./image.jpg"
2- in out folder: "../image.jpg"
3- or root relative path(eg asp.net): "~/pictures/image.jpg"
4- or relative path: "../pictures/image.jpg"
body
{
background-image: url(./image.jpg);
background-repeat: no-repeat;
}

how to set svg pattern as html background

I'd like to have a pattern I made in an embedded SVG appear as the background of an html doc.
<head>
<style>
body{
background-image: url('apattern.svg');
}
</style>
</head>
Basically, SVGs do not work well in body-background as you described in the question, if at all. What I've done is create a fallback option for those browsers that have an issue.
body {
background: url(fallback.png);
background-image: url(image.svg), none;
}
See ... http://css-tricks.com/using-svg/

how to use CSS opacity to let background bleed through in IE8?

I have an HTML page with a pink background image. I want to define a DIV on the page for text, but I want the background to show in the DIV much paler, almost white. I tried this, but it doesn't seem to work on IE8.
My HTML...
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="div1">
testing
</div>
</body>
</html>
and here's my CSS file ...
body
{
background-image:url('back.jpg');
background-repeat:repeat;
}
.div1
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
background: #ffffff;
}
Any ideas?
The thing you have to keep in mind is that the opacity property will affect the opacity of the entire element, including its text/children. If you want to affect JUST the background, you will need to approach it in a different way.
You could use RGBA for modern browsers:
.div1 {
background-color: rgba(255,255,255, .4);
}
Then, in a separate IE stylesheet (using conditional comments or similar method):
.div1 {
background: transparent url(white_trans.png);
}
You would need to make a PNG-24 image, 1px x 1px, that was just simply white reduced to 40% opacity. That will work in IE7 & 8.
You should add the zoom: 1 declaration to your .div1 block.
If you are using a plain (solid) color as background, then, I would suggest you to just use a paler pink for your DIV.
This will create the illusion of opacity. And more importantly, you will not face issues with some browsers.