I am working on a WordPress site, and would like to set a different background image only for one specific page. Here is the current CSS calling for the image:
div#header .box-masthead .title a{
background:transparent url(../images/logo.png) left top no-repeat
How can I set it up so that I can use something like logo-2.png as the background image only on one specific page, while keeping logo.png as the background image on all other pages?
Wordpress gives every page a page-id class that can be found on the body tag. It looks like page-id-xxx where xxx is a number. I you find out your page-id then it's easy to change the background for that specific page:
body.page-id-10 {
background-image: url("../images/logo.png");
}
Try with the below CSS on the basis of WordPress page id -
.page-id-PAGEID div#header .box-masthead .title a {
background:transparent url(../images/logo.png) left top no-repeat;
}
Note: Replace "PAGEID" with page id in WordPress.
Related
I would like to replace this image when I scroll down on another image.
Firstly, the menu looks like:
And when I scroll little bit down menu looks like:
Is it possible to replace using custom.css this item in menu? I just want to replace this picture on another picture. Is it possible to do by using only custom.css or do I need to have acces to files and use here java script?
When it's possible can somene just tell how?
Link to my site : http://test.projekt-tenis.pl/wordpress/
Give this a whirl:
.is-sticky img.menu-image-title-hide {
background: url(http://www.spiritvoyage.com/blog/wp-content/uploads/Screen-shot-2011-12-06-at-2.56.08-PM-150x150.png) no-repeat;
width: 150px;
height: 150px;
padding-left: 150px;
}
Should do the trick. It moves the original src image out of the way and adds a background image. As far as your user is concerned it'll just look like it flips from one image to the other.
It works because the class .is-sticky is added to the header on scroll by js.
I am trying to display an image in WordPress via CSS using background-image as I want to display different scaled images for mobile/desktop.
If I insert the image inline then it displays just fine. I do not want to display it inline as I want to serve different images for specific media queries. As such I am trying to display the image using: background-image with CSS.
I have made a new folder called images and moved the images I want from uploads to images which is in the same directory as style.css
The file pathway is: wp-content/themes/resca-child/images
I am using the following code in CSS:
.image1 {
background-image: url('/images/Homepage1-edited.png');
background: no-repeat center center fixed;
background-size: cover;
position: relative;
top: 0;
left: 0;
width: 100%;
max-height: 925px;
}
I have played around with different file pathways and CSS and I still can't get it to load. I'm guessing I have the wrong pathway precedence or something but I am not sure how to fix.
you can try an easy way you just have to put backgroud image i.e.
background-image: url('/images/Homepage1-edited.png');
in your inline style and add like this suppose image1 css apply on a div
so code should be
<div class="image1" style =" <?php echo get_template_directory_uri(); ?>background-image: url('/images/Homepage1-edited.png');">
now you can will whole path. It is very helpful when you want to add dynamic image because from css file you can't add dynamic image
I hope it will help you :)
Wordpress have style.css and images folder in same path so you can use background image path like images/Homepage1-edited.png..
.image1 {
background-image: url('images/Homepage1-edited.png');
}
Remove the first / which is telling the system to look for the file in root :)
If your CSS was in a subdirectory, which is fairly standard, and you images were in an img directory, you would use ../images/Homepage1-edited.png by the way.
But as you specify they are in the SAME directory, simply remove the slash.
you can add the background-image of below code :
1) <div class="image1" style="background-image:url(<?php echo get_template_directory_uri(); ?>/images/Homepage1-edited.png);">
OR
2) wp-content/themes/resca-child/style.css
add below code in child theme css
.image1 {
background-image: url('images/Homepage1-edited.png');
}
I have attempted adding a sky background to my website's stylesheet, but nothing really happened.
body {
background: "sky-08.jpg";
}
When I previewed the page, the background was white, like when I just started making my page.
It should be: background-image: url("sky-08.jpg");
This also assumes that the image file is in the same location as the CSS file (Or HTML file if it is inline)
If the image is located under an images folder in the root directory: background-image: url("/images/sky-08.jpg");
Use the background-image property. Like This:
body {
background-image: url("sky-08.jpg")
}
You can use the background property as shorthand for all the background properties including attachment, color, image, position, and repeat. If you only want to set one of these properties it is better to use the full name. See here for more: http://www.w3schools.com/css/css_background.asp
I am trying to put an image into the background of my app. I seem to be running into some issues with the CSS. I have the following class:
.fixedBar {
position: fixed;
left:0%;
top: 0%;
width:100%;
padding:15px 15px;
background-color:#003c0c;
background-image: url(NavAppPics/city-clipart-black-and-white.gif);
background-blend-mode: multiply;
background-size:cover;
z-index: 6;
}
I am trying to use an image from a folder, but I cannot figure out how to load the image from the folder. I've looked at other similar questions os Stack Overflow, but i cannot tell what I am doing differently.
As well, I am trying to make the bottom of the image line up with the bottom of the fixed bar (the class i am using) however it seems to be lining up the image incorrectly (i switched to an online URL to test this). any ideas or help would be greatly appreciated!
edit:
My folder structure for this section is:
Public
bower_components
directives
NavAppPics
city-clipart-black-and-white.gif
styles
styles.css (where the class is)
tpl
EDIT: The filepath must be wrong for your image. Where is the NavAppPics folder located? If it's in the root directory, add a / to front of the URL to tell it start from the root directory rather than the current folder:
background-image: url(/NavAppPics/city-clipart-black-and-white.gif);
As far as aligning the image to the bottom of the div:
background-position: center bottom;
More info about the background-position property:
http://www.w3schools.com/cssref/pr_background-position.asp
The address of the image is relative to the CSS style file.
Since your CSS is at styles/styles.css, the background image is being looked for at styles/NavAppPics/city-clipart-black-and-white.gif.
Specify a relative or absolute path to fix the problem:
background-image: url(/NavAppPics/city-clipart-black-and-white.gif);
Or:
background-image: url(../NavAppPics/city-clipart-black-and-white.gif);
I want to use multiple images as backgrounds.
For example: index page - car image, about me page - notepad image
I tried to add this code:
body {
background:url(images/big_03.jpg), url(images/big_02.jpg),url(images/big_01.jpg);
background-repeat:no-repeat;
background-size:cover;
}
But I don't know how to switch them. How can I choose which image to use as the background?
Hi you can use a technique call "CSS Sprites". In short, you combine all of your images to one big image by using a sprite generator tool at http://spritepad.wearekiss.com/. Next, you change the background positions within the big image to get the background image for the element.
You can learn more from here
You can add a special class to your body element for each page and specify a different background-image for each case.
HTML:
<body class="home">
...
</body>
<body class="about">
...
</body>
CSS:
body.home{
background: url(car.jpg);
}
body.about{
background: url(notepad.jpg);
}
You can accomplish this by setting each <body> tag with a specific ID and then style those ID's separately in the CSS:
<body id="home"> </body>
CSS
#home{
background-color: red;
//or image, whatever properties you want
}
http://jsfiddle.net/
As far as I know, you have three options:
1) Code it into the HTML. To do this, change <body> in your page to
<;body style="background-image: url(<url of image>); background-repeat: no-repeat; background-size: cover;">.
I see this as sub-optimal because it means a lot of typing in different places, potentially causing inconsistencies if you want to change, say, background-repeat to repeat-y and forget to change one or more of your pages.
2) Use a "mini-stylesheet" consisting of just one rule specifying the background on each page. I don't think that this is a very good solution, because along with the problems raised by 1), you also have to deal with another HTTP request, which slows down the page load.
3) Use different ids on each body element (so your <body> would become <body id="home">, <body id="about">, or anything else. I think that this is the best solution because it lets you collect all the code in one place:
body {
background-repeat: no-repeat;
background-size: cover;
}
body#home {
background-image: url(<home image url);
}
body#about {
background-image: url(<about image url);
}
This code can be stuck in the stylesheet that you link to in all your pages, so you don't end up with any extra HTTP requests. If you want to change one of the property/value pairs for body, you don't have to go through lots of files changing every one, you only have to change one.
If you use static Html u can give class to your body element or outer wrapper. Example :
Homepage
<body class="homepage">
</body>
About Us Page
<body class="about_us">
</body>
and set css
.homepage {
background-image : url('../path/to/image.jpg');
}
.about_us {
background-image : url('../path/to/image.jpg');
}
and so on for each page.
Your current css selection working for global body,
body {
background:url(images/big_03.jpg), url(images/big_02.jpg),url(images/big_01.jpg);
background-repeat:no-repeat;
background-size:cover;
}
This type of css working if u want use multiple BG image on page, not made different BG for each page.