change background image of wordpress site - html

I am trying to change the body background image for a wordpress site but it is not working.
The HTML class is this:
<body class="home blog" style>
And my CSS is this:
body.home.blog{
background-image:url('http://distilleryimage10.s3.amazonaws.com/0d443332b7bc11e2a7d622000a9e298f_6.jpg');
background-position:right top;
}
Does anyone know what CSS to write?
Also this is a wordpress site so keep that in mind. I don't use wordpress or php very often.

Got it..
You are going to want to remove the following line for your 'blue.css' stylesheet:
body {
background: #232528;
}
The background-image is working.. the background color is just being placed over top of it.

I don't see in your css rule for body.home.blog, only background-image for body without classes. Check your css it's should work

You need to remove the following from your Blue.css file
body {
background: #232528;
}
Or add !important; to your background in the file style.css like so:
body {
font: 0.75em / 1.73em Arial,sans-serif;
color: #6f6f6f;
background: #211D19;
background: url('http://distilleryimage10.s3.amazonaws.com/0d443332b7bc11e2a7d622000a9e298f_6.jpg') !important;
background-position:right top;
}

Related

How to change the color of the background the bootstrap 4

I would like to change the background color of the bootstrap theme.
This background:
background1
and this background:
background2
I want to change the color to blue for green. I was checking out the file sb-admin-2.min, but the maximios that I can do it, was change the collor of the buttons for example. Someone can help me?
Follow the link for see the file sb-admin-2.min
If you want to see my project, you can enter in this website: http://americaribeiro.atwebpages.com/escolar/ and use the email: romeu#romeu.com and password: 123
To change the background of the first image, change the background property of body element in index.php
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
background: red; // here
}
To change the background of the second image,in sb-admin-2.css
.bg-gradient-info {
background-color: red; //here, you can override this class
}
You can simply overwrite bootstrap styling with your own style.
.my-class {
background: red;
}
<div class="some-bootstrap-class my-class"> Hello </div>
You can use selector
body{ background: #36b9cc !important; } for using your green color.

Trying to set background image with inline css

I'm setting up a basic html site. I want to use an image for my background for the landing page. I'm trying to use css inline (I thought this would be easiest...go figure).
In my body tag, I've got the color I want, "darkkhaki". But the property for the background image is not coming up. I have uploaded to my flickr account the image I want, but no go. I did notice in my ST3 window that the closing parenthesis is highlighted red, but I can't find out why.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: darkkhaki;
background-image: https://www.flickr.com/photos/132197683#N04/33747163168/in/dateposted-public("praetorian_punisher.png");
}
h1 {
color: red;
text-align: center;
}
I would like to see the .png file as the background. It's not coming up, though.
Thx for any help.
First, you should do it like this:
body {
background-image: url(...);
}
Second, the url you're trying to use points to HTML page, not to the image itself. Correct url would be https://live.staticflickr.com/65535/33747163168_9f12d3a173_b.jpg.
body {
background-color: darkkhaki;
background-image: url(https://live.staticflickr.com/65535/33747163168_9f12d3a173_b.jpg);
}
h1 {
color: red;
text-align: center;
}
<h1>Hello!</h1>

Background color does not show in style.css but does in index.html

New to HTML5 & CSS.
Using Sublime Text 3
currently following a video to create a one page portfolio.
video link provided: https://www.youtube.com/watch?v=UMupINi7fWQ
In the video Abdul Khan is putting CSS background color code in the style.css panel/folder.
Example:
*{
margin: 0;
}
body {}
#container {}
header {
background: #ADD8E6;
width: 100vw;
height: 100vh;
}
#one{
}
But when I try and put this code in my style.css, it does not work.
The background color only works when I am in the index.html and place the "bgcolor" within the body.
body bgcolor="#ADD8E6"
I was hoping someone could explain to me why I can't get it to work in style.css, but can in index.html
Thanks!
Can you write your code in head section of index.html
Like this:
<head>
<style>
header {
background: #ADD8E6;
width: 100vw;
height: 100vh;
}
</style>
</head>
if it work then let me know.
And then you just have to check the linking of CSS file on your index.html page.
Because you have not link your CSS properly.
Try this snippet in your style.css to set the background color of the body tag:
body {
background-color: ##AABBCC;
}
W3Schools - background-color

How do I change Foundation Zurb background?

I found out that html and body quote got basically a background:none.
How can i change that to apply a new background in one of my quote ?
For example, if you want a grey background for your body, put the following code :
body {
background-color: #CCCCCC !important;
}
The !important lets you override a property that has been defined in another CSS. In the case of Foundation, the background has probably been set before.
Hope that it will help you.
You have two background tags in both style sheets of Foundation 4:
Try to edit:
css/foudation.css
body {
background: white;
...
}
css/normalize.css
html{
background: #fff;
...
}
If using foundation with SASS add this to ./scss/app.scss :
body, html {
background-color: $white !important;
}
where $white - variable defined in ./scss/_settings.scss

How can I override HTML body bgcolor attribute with CSS?

I'm writing an external user stylesheet for an old HTML page that specifies the background colour in the body tag: <BODY BGCOLOR="#808000"> (note: I can't edit the HTML).
I've tried writing the obvious stylesheet:
body {
background-color: #ffffff !important;
}
but it has no effect: the original colour remains.
Can it be done with CSS? If so, how?
FIX:
I've checked it in my place it works
body
{
background-color: white;
}
You can also do
<body style="background-color:red"></body>
It works fine here (I tested it). Are you sure the stylesheet is being imported properly?