On this page : https://nutreviva.com/peak-health-essentials/ I am trying to fully change the background of the page from white to ivory.
When I try to do this it is only changes to the top half middle sections between the boxes and at the bottom of the page. The sides of the page are still white and this is driving me up the wall.
I have scoured the Inspect in Chrome but nothing seems to be working. When i do, it changes the background for the rest of the pages too zzz
In your custom.css file I'd add the following:
body.page-id-3811 {
background-color: ivory;
}
It seems to work fine, I'm only able to see the colour white background colour in the header and the panels.
In this particular pages HTML try making it say this:
<body style="background-color: ivory;" and see if that is what you are after
Related
Lets start with I'm using square space CSS code injector. I am trying to have some images placed behind the text links that read (menu, what we sellin', wholesale) With my background image it is hard to see the links. I would like to add small wooden boards as the image behind them. Appreciate any help .
My website: www.slurpnsnack.com My website
edit: I do not want to add a background image to the header itself. I am wondering if there is a way to attach the picture itself to behind the link, or just how to go about placing my own links there.
Your links are held in a div with class .header-nav-item
So CSS along these lines:
.header-nav-item {
color: white;
background-image: url(wood.jpg);
}
should be enough, though you may want to play around with background positioning and sizing depending on how consistent you want the look to be on the various sized items and what your image is actually like.
What I want to achieve:
I am doing the very familiar CSS zen garden however I can't seem to get the image to float like this. I want it at the top of the page and to stay at the top like a toolbar like stackoverflow has mounted to the top of the page.
Unfortunately, any time I try to display my image it is not only behind the text but also far too large. I only see about 1/3rd of my image. If I try to scale it in any way then it disappears completely. I have seen that other people do this with the added <divs> but I am told that I should use ::before to do this ....either way I can't get either to even display my image ...the only thing that does barely work is ...
body{
background: url("../CSSMidterm/Header.png") center;
}
but as I said that displays 1/3rd of the image....any idea how I can rectify this situation?
To make it clear, I am asking how to mount an image to the top of a webpage using ONLY CSS no touching HTML at all. I want it to be fairly similar to the toolbar at the top of Stack Overflow own page.
You can try this
body {
background : transparent url("../CSSMidterm/Header.png") no-repeat center center/cover;
}
Link to the documentation for background css
I am having some issues on my website with some CSS I can't get to work.
For some reason on some pages the sticky navigation text remains visible while on others it doesn't. I'm not a developer but would appreciate any tips people might have.
This page it looks correct:
https://ecoheatcool.co.uk/underfloor-heating/
This page is incorrect and you can see as you scroll the links disappear. (White on white)
https://ecoheatcool.co.uk/
I would appreciate any help, Thanks!
If you mean how the text is white on white when you scroll on the homepage, you could add CSS to your custom styling:
.fusion-is-sticky .fusion-main-menu>ul>li>a {
color: rgb(1,62,72);
}
The color is pulled from the background-color of the navbar, but you could change it to any brand color.
Well, upon scrolling, the navbar gets a few classes that give the links a white color. You can just remove these CSS selectors. In this css file remove the color attribute on line 3339 and on 3323. This should fix your problem.
in my Drupal site, some black, empty space is being displayed at the bottom of the page, like in the image below..
By googling, I understood, it is because not enough minimum content in the page. but did not get proper solution to fix it, except min-width setting in global (style.css) file, but it is displaying unnecessary scroll bars even a page has one row of data when you set that property.
Could any body suggest me a solution to this problem
Surely just add the right background colour to your body tag in your css?
in your style.css add
body {
background: #f4f5e5;
}
I have a page with a yellow background. Now I add an Iframe to it including a different page on the same domain which has a white background. When I look at my Iframe now it has taken the background color of the yellow page! What I want is the Iframe to simply show exactly the other page, just like a window without changing any colors or anything.
What do I have to do to achieve this?
My code: <iframe src="http://www.example.com/page.php"></iframe>
Browsers other than Internet Explorer give iFrames a transparent background if the pages contained within them have no explicit background settings.
In order to overcome that, simply set the background color of the iFrame to white (which is the default background color).
iframe
{
background-color: white;
}
If the page indeed sets a background color (now or in the future), this code would simply not have any visible effects.