Is it possible to add a line to my CSS like this:
.custom_bg {
background-image:url(http://domain.tld/img.ext);
background-repeat:no-repeat;
background-color:#000;
}
And then on that certain page, call this some how so that the page 'knows' to listen to this line... is that possible?
Any help is appreciated. I'm fairly new to CSS.
Thanks
What you can do is make a class with a background-image(I guess you are already having that), and than use that class on the body element of that page, so for example
.custom_bg {
background: url('URL_HERE');
}
And say you want to change the background of the contact page, you can make your HTML like this
<body class="custom_bg">
Note: Call this class on the element you want to over ride the
background image, here I am assuming that you want to over ride the
background image for the body tag.
This will over ride the default styling, I guess you must be using a general element selector in your stylesheet like
body {
background: url('URL_HERE');
}
So when you define the class, CSS will pick the image from the class thus by over riding the default background image
You could add a class to the body of that single page: <body class="custom_bg">. The rest of the pages will be unaffected by that style.
as well as I understand all you should do is add this class to the tag or any other container like this:
<body class="custom_bg">
...
</body>
Hi If you want to specify background for a particular page only in your application then do
<body class="custom_bg">
...
</body>
while the css will be
.custom_bg
{
background: url('URL_HERE');
}
and if you want the background for all pages then try the following CSS
body {
background: url('URL_HERE');
}
Related
pretty new to CSS and HTML and was hoping somebody could help me fix this. I wanted to be able to change the icon for the cursor although when I run the code, simply no change. A few visits to chatGPT hasnt done me much either. Here's my code:
body2 {
cursor: url("assets/img/wiiu/Smile_icon_32x32.png"), url("assets/img/wiiu/cursor.svg"), auto;
}
And yes, it is 32x32.
I've tried moving it to different classes, changing words, changing everything. Although nothing has worked.
here is a good reference: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor?retiredLocale=de
So basically you try to applie to a body2 HTML element you're CSS code. If its a class try the CSS selector .body2 {} or in the case its an id of a HTML element #body2 {}.
In you're css you've got one main picture and the second one as fallback. Just make sure you set the correct path corresponding to the location of you're CSS file.
To ensure that, you can also try the full path instead of the relativ one like C:\Users\xxx\Smile_icon_32x32.png
You are using the wrong css declaration, your code will only work if you have defined a custom html element having <body2> as tag.
What you probably want is:
body { ... }
applied to <body> tag
or a css class
.body { ... }
applied to or any other tag having body as class.
or a css id
#body { ... }
applied to or any other kind of tag with body as id.
Alternatively check in the browser console if the rule is applied and if the image path is resolved correctly.
Here is an example where http://example.com/32x32/990000/fff.png&text=PNG don't exist and https://dummyimage.com/32x32/009900/fff.gif&text=GIF exist so the gif will be used instead of the png :
.body2 {
display:inline-block;
cursor: url("http://example.com/32x32/990000/fff.png&text=PNG"),url("https://dummyimage.com/32x32/009900/fff.gif&text=GIF"), auto;
}
<div class="body2">display</div>
I currently have this, but it is not setting the background as expected:
<body style: background-image url()>
Also I need it to be a file not a link
Looks like #Sverre beat me to the suggestion of moving your CSS style to a separate file. If you prefer to leave it directly in the tags, you will have to reformat it a bit like so:
<body style="background-image: url('https://yourdomain.com/some-image.png')">
I'd recommend doing this in your CSS file. This page goes in depth on CSS backgrounds and shows you how to style them as well.
You can do it in the body tag as follows:
body {
background-image: url("example.jpg");
}
I am trying to get the white border on this page to disappear:
http://www.donaldrussell.com/blog/carving
password:testpage
I only want it to disappear on pages with this specific template.
Here's the CSS I'm trying to use:
.fullwidth #wrapper{
background-color:#000;}
Can anyone point out what's wrong please?
Thanks
It's the white border, I would like to get rid of, so it looks like this:
Im not sure where the .fullwidth class is actually being used on the page.
The white background is being called from the main style.css stylesheet on line 224.
If you have access to that file, then just change the value there.
If not, try adding this to the page.
#wrapper.black_bg{
background-color:#000 !important;
}
and change your wrapper div to this:
<div id="wrapper" class="hfeed black_bg">
There is no parent container with the class .fullwidth (as far as I can see). The only option for classes in your body (which is the parent container in this case) are:
<body class="page page-id-7703 page-template page-template-onecolumn-sliderpage-php custom-background">
Try instead adding a class to the wrapper and styling this:
.page-template-onecolumn-sliderpage-php .SOME-CLASS{
background-color:#000;
}
You shouldn't use the class then ID like that. best to stick to classes when styling.
Since you want it to disappear only on on the pages with that particular template, here's what you do.
Open the page's template and add an ID called "login-page" to the body tag so that you can target it separately.
Then create the block of CSS code below being specific with the ID you added to the template's body tag.
#login-page #wrapper {
background-color: #000; /* or Inherit */
}
Note You can change or add to the above block of code and it'll affect just the the template that you applied the the given ID to.
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.
I need to apply different background images to the home page < html > tag and the inside pages of a site. In order to do this the references need to be unique.
Without using class or id, how do I differentiate between the tags?
I tried this, but it doesn't validate:
<html class="inside"...
Thanks!
Add the class to your body element, where it is valid.
Then do
body.inside {
background-image: url(/path/to/it.png) repeat;
}
Inline stylesheet for each different page:
<style> html { background-image: url(someimage.png); } </style>
If you're talking about different background images for different pages, I guess you'll need to create a different stylesheet for each different background you want, and just make sure to include the appropriate stylesheet from each page.
You want this:
CSS:
#home { background: ... ; }
body { background: ... ; }
HTML:
<body id="home">
</body>
Other pages:
<body>
</body>
You should consider using IDs. That way you can keep all the references to your background images in your CSS file. E.g.
#background-main { background-image:url(background-main.jpg) }
#background-page1 { background-image:url(background-page1.jpg) }
#background-page2 { background-image:url(background-page2.jpg) }
You would then just have to reference the ID of the background image you want to have displayed. E.g.
<body id="background-main">
Alternatively, you could use classes.
This approach will make it easier for you to maintain your site.