I have been trying to change the background image of the wordpress theme but i am unable to change it.
I tried:
body {
background : url('images/squad.jpg');
}
I placed this code under design-settings in custom css styles. But i do not see any changes
in wordperss stylesheet file, search for body and html selectors and check if any background applied to them.
in html selector add this property:
backbround: #fff url(imagePath) no-repaet top left;
you can change #fff to the color that is more related to your background image. it's not necessary, but it's best practice.
if your background image is a pattern and you want it to be repeated, change no-repeat to repeat this should work.
Is your css file is in separate folder?
try this
body {background : url('../images/squad.jpg');}
Related
I am trying to change the background colour of a menu in Wordpress.
The background is transparent for all other pages which is good, but for the homepage where the first element on the page below is a slider the menu remains grey and I cannot seem to change it without making it opaque for the whole site?
The page/site in question is http://nudda.com/new/home-2
I think you are using Wordpress for development, so you can add a specific ID to your home page, then you can use it to change the menu background just for home page,, you should do something like this:
#Your_ID #top-wrapper {
background-color: rgba(0,0,0,0.1);
background-image: none;
}
simple fix is
.page-id-2700 #top-wrapper{
// your background color here
}
page-id-2700 is the wordpress generated page class for home
First add custom CSS and JS plugin in case you don't have a place to add custom CSS.
Then, add this line of CSS code:
#top-wrapper {
background-color: #050505 !important;
}
I can see that you might have already have written that but without the !important.
What is happening is that the default style is overwriting the new style.
The !important will allow you to force overwrite it.
I'm designing a site using a simple worpress theme and customising a few elements with the Simple Custom CSS plugin.
I'm trying to change the colour of the footer and I've used
.site-footer {
background: #4E5754;
color: #f29e0f;
}
This is coming though as it is changing the text colour but not the background - the new background colour is showing up when I inspect the page source but not changing on the actual page.
What might be overriding the CSS?
You can use this style for this.
.site-footer {
background: #4E5754 !important;
color: #f29e0f;
}
Or put your style under the default stylesheet.
After a bit of trial and error I realised that the two colours were actually being controlled by different elements - site.footer and footer.inner
Thanks for the help everyone!
I'm working on a site for our clinic, here: www.markshoushadentistry.com
I am trying to change the background on the pages (not home page) from white to a textured image background. I've located using Inspect in Chrome the CSS is:
.site-content {
background: #FFF;
}
But I can't seem to find where it is to change it. There is an option in customizer that changes the color of the background, but I'm trying to change the background to an image.
Can anyone tell me where the code is to change the background color to an image?
Thanks so much in advance
Your .site-content is overriden by another top CSS
.home .site-content {
background: none;
}
if you change your CSS with:
.home .site-content {
background: #fff !important;
}
it should work
To change background color in a wordpress you can follow the following steps :
Login to wordpress and open dashboard
Go to Customizer (Appearance > Customize) -> Additional css
Enter the CSS to change the background color. Below is sample code:
site is the css class for the whole site.
XXXXXX is the hex code for the color you want to use.
you can choose your color code from here
Click Update File
And your background color will change . Hope this helps you
Is it possible for css to change background image depending on which site we are?
For example, when I am on a index.php, I want to see images/index.png, and when I am on first.php I want to have /images/image.png.
You can change the background by leaving it blank on css.
<style>
body
{
background-image: url(/images/index.png);
}
</style>
And use that on every webpage.
I am trying to change background color of my html page but its not reflecting. I am using jquerymobile, marionette for my pages. In my css i have written
body {
background-color:rgb(44,2,4);
}
even i had tried
html, body {
background-color:rgb(44,2,4);
}
What happens is the background color is being set, but i can see on html page just for a flash when the pages loads but after that the default jquerymobile theme gets set.
Can anyone please help me with the solution?
Thanks in advance.
When working with jQuery Mobile you must change class .ui-page if you want to change background color. Even if you change body background with !important it will still stay hidden because class .ui-page acts as an overlay over whole page.
Even more it must be done with overriding, like this:
.ui-page {
background:rgb(44,2,4) !important;
}
Working example: http://jsfiddle.net/6wD7v/
EDIT :
Found it. You are also using a panel which uses additional overlay div over .ui-page.
This CSS will work now:
.ui-page, .ui-panel-content-wrap {
background:rgb(44,2,4) !important;
}