I have a problem when trying to add background image to page from CSS.
Here's one example of how I'm trying to do that:
background: url("/wp-content/themes/bootstrap2wordpress/assets/img/tile.jpg") top left repeat;
But all I get is whitespace.
Can anyone tell me what to do?
Try using the full URL including domain name first. The remove the domain once it works I find often the path is different from what I assume.
Related
I would like to know how to create a custom background.
There is currently an active site, that i am trying to figure out how i can do the same or similar
https://suscopts.org/
enter image description here
Well, I'm not sure if you want to know how to create such a background pattern or don't know how to set the background of a wordpress website.
This seems like a repeated background pattern. Searching for something like "seemless pattern" could help. This images are small and repeated, so you don't need to load a big background image.
In the CSS you can use 'background-image' and 'background-repeat' on the body element.
You can use right click in your browser to select inspector to inspect the website. You should find the element wich has the css set for the background image. Start with the html tag and work your way inside, followed by body, div id page, etc, what ever this page structure looks like. You then have the element you need to target in your css file to give it the background attribute. The CSS file of a wordpress site is found in the Themes folder and is called style.css
Hope this gives you a start.
If you want to clearify your question I am happy to give you a more detailed answer.
My image grid on my Wordpress site for some reason does not resize fully to the max-width of the browser when I click an internal link to the homepage (eg. I click on an image then click back on the logo). It goes back to fullscreen when I resize the browser. It also works fine if I go into my website externally (from typing in the url). I have tried using:
#site {
max-width: !important;
}
but doesn't work. I'm not sure if if it is the theme that is the issue or one of my custom css. I have tried isolating some css with the inspector tool and seeing if any of them caused the problem but I couldn't find anything.
Unfortunately I don't have access to the full backend of the theme and I'm not a developer.
So if anyone has any idea that would be great!
Link is http://imconniehuang.com/
Your image gallery's width is calculated and set by Javascript. Have a look at the surrounding div.vc_row, the width is set inline there. So no point in using CSS here. Seems like the script waits for a resize event to recalculate the gallery's width.
The prefix vc_row indicates that you are using Visual Composer. I think the problem is with this plugin. I therefore recommend getting support from the plugin provider-
BTW:
max-width: !important; is not valid syntax. 'max-width' sets the maximum width of an element. You can have a look at the syntax here.
The image in the masthead of the Bootstrap Template is located in the CSS of the downloaded Bootstrap files, however, when i change the image url to the desired picture and save it, it does not change the image on the page and keeps the old deleted one, what's strange is that when i add the URL in the CSS file on Chromes Dev Tools the preview does exactly what i want it to do but when i do exactly the same on my actual code in the C9 workspace it does nothing and Bootstrap seems to always locate the old default image even though i have gone as far as to completely remove it from my Workspace? If anyone would point out where i am going wrong i would be extremely grateful.
The Bootstrap CSS
header.masthead{position:relative;background-color:#343a40;background:url(../img/bg-masthead.jpg) no-repeat center center;}
I am trying to change it to
header.masthead{position:relative;background-color:#343a40;background:url(http://www.4usky.com/data/out/94/164852092-the-riddler-wallpapers.jpg) no-repeat center center;}
It looks like 4usky.com doesn't allow hotlinking. You'll need to save it and load it from another location and reference that in your background URL.
Just put the url path inside quotes.
header.masthead{position:relative;background-color:#343a40;background:url('http://www.4usky.com/data/out/94/164852092-the-riddler-wallpapers.jpg') no-repeat center center;}
Hope it does the job.
I've downloaded a background image for my website, and for some reason or other, it's simply not being displayed.
This is the CSS code I've got:
background-image: url(Resources/Icons/background-image.jpg);
background-attachment: fixed;
I've even tried adding the full path name - to no avail.
The strange thing is that I've done this numerous times in my website, and all my images are displayed. It's only this that's giving me a problem - and there is no red cross showing that it cannot find the image - it just doesn't appear.
EDIT: For some reason, if I place the url of the webage where I got the image from, it works.
Any ideas?
Is your css in the same directory as your image? Probably not, I would assume. So you need to get back to the root and access the image properly.
Something like:
background-image: url(../Resources/Icons/background-image.jpg)
Unless your stylesheet resides in the same folder as you images, you should try navigating from the root:
background-image("/images/someimage.png");
Personally, I've found that navigating from the root of the application/site tends to be the most reliable/scalable option.
Wrong path probably...
background-image: url('/Resources/Icons/background-image.jpg');
I've ported the Wordpress app from wordpress.org to my web site. I've changed the html and the css to conform to my existing design. I've placed the entry data in my 'main' div, which has a left margin of 19em to keep it to the right of my navigation div. This margin appears to be overridden somehow by the generated html within the 'main' div. I've patched some of the elements by adding the margin back to them, but would prefer a cleaner fix. I've looked at the page using Firebug, but I can't identify the appropriate entry. What is overriding my margin setting?
The problem page is here. Notice the Tags at the bottom.
Another page that doesn't use WordPress code doesn't have this problem. It is here.
Thanks for any help
I want to keep my acceptance rate high so I don't appear ungrateful for all the great help on this site. The answer was that the css was defined as a class and the html was using 'id='. Sometimes it helps to make sure the computer is plugged in.