How to Insert Background Image in One Page Wonder Bootstrap template? - html

I'm building from the One Page Wonder Bootstrap template: https://startbootstrap.com/themes/one-page-wonder/
I can't figure out how to insert a background image in the masthead. Has anyone had experience with this?
Thank you!

You can replace a good bit of the masthead content with this rule.
header.masthead .masthead-content {
background-image: url('http//example.com/image.png');
}
Replacing the entire masthead is more complex, though. You would probably want to start with editing the HTML to remove the bg-circle elements to give you a cleaner DOM to work with.

Related

Override Wordpress Theme In-Line Style With CSS

Thanks in advance for your time and assistance!
I'm trying to edit the header image on a Wordpress Theme with little luck. It seems to be an "in-line style" which I haven't encountered before. I've searched quite a bit but nothing seems to be working for me, including using important! (though perhaps I'm using it incorrectly).
All I'm trying to do is change the background-size:cover to background-size:120% so the image scales better on smaller screens. Right now it chops my face in half when viewing on mobile which is not ideal.
<div id="custom-header" style="background- image:url(http://brentbareham.com/wp-content/uploads/2016/09/HeaderImage.jpg);background-size:cover;">
<div class="container">
<div class="header-content">
</div><!-- .header-content -->
</div><!-- .container -->
</div>
This is the first theme I've ever edited a theme extensively. I'm using a child theme, not that that should matter, and I've been successful thus far but I can't seem to figure this one out.
So you can see exactly what I'm looking at, the website is http://brentbareham.com
Thanks again!
So long as the inline style does not have !important on it, you can use straight css !important to accomplish what you want:
#custom-header {
background-image: none !important;
}
Here is a jsFiddle that demontrates that it works.
using jquery you can override image
myscript.js you can add theme js folder
jQuery(document).ready(function(){
jQuery("#custom-header").removeAttr("style").attr("style","background-image:url(http://brentbareham.com/wp-content/uploads/2017/Image.jpg)");
})
in theme functions.php
function js_head_scripts() {
wp_enqueue_script( "headerjs", get_template_directory_uri()."/js/myscript.js" );
}
add_action('wp_head', 'js_head_scripts');
You have to use JavaScript to override inline styles. Because of the browser render order, it's the inline styles that get higher a higher importance. So in order to restyle that you have to use JS. This however will cause a reflow i.e. the page will be redrawn which looks like a flicker.
Here some good info to know.
How the Browser Works
Update
Sorry. #Cale_b is correct. the code that you show does not have !important assigned to any of the styles. So there are a couple of things.
1). I am not sure if it is a typeo, but you have a space in the HTML code that you have posted here.
<div id="custom-header" style="background- image:url(....
<!-- should be -->
<div id="custom-header" style="background-image:url(....
2). Changing the background-size to "contain" will probably give you the affect you are looking for. It will constrain the image inside of the div element. No JS needed.
3). You may want to try this.
div#custom-header[style]{
background-size: contain;
}
CSS3 background-size Property

Logo not showing

I am using Google Blogger. I just changed template of my blog and choose a new one. But there is a problem with this one. My logo is not fully showing.
My website: www.pkgeek.com
The K of the logo is missing. I tried to find the code for the logo, but didn't find. I think the author haven't typed specific code for the logo.
I think the blogger it self is doing some customization.
How can i fix this ?
Your div is way too small for you Logo :).
Just go in your css file and paste this code.
'#header { width: 30%; }'
I put 30% in case you need to add some things on the right of your logo, if not, just put 100% it goes well.
Good luck ;)
#header needs to be set to width: 267px instead of 220px in your css

background html image

I'd like to make an image the background of one of my html pages.
I tried
body
{
background-image:url('./images/backgroundimage.gif');
}
But this wouldn't make it appear as the background image. I feel like this should be working, but it isn't. Anyone have better ideas, or see what I have wrong with this idea?
Drop the single quotes and the ./
Also, make sure that file actually exists relative to the that css file's url.
Edit: also search.
Try using this background-image:url(../Images/backgroundimage.gif); and as bkconrd suggestion, make sure your image file located in correct path(I assume you ain't newbie in HTML, hope you check your directory structure). you can Use inline css too <body STYLE="background-image: url(../images/backgroundimage.gif)"></body>(for testing purpose, But usage of Inline Style generally not recommended style of coding).
Hope this helps you, If not let us know .... Happy coding
How about trying this. I think this will work because I have tested it.
body {
background:url('./images/backgroundimage.gif') no-repeat 0 0;
}

background image not rendering on wordpress theme

Topic explains it all. I've got it set as...
body{
background-image:url('images/bg.gif');
background-repeat:repeat-x repeat-y;
}
Can't seem to figure out why it's not rendering in the background. I'm new to wordpress themeing in general. Could anyone help me out? I've posted a link to the content in full below.
http://www.aidanchurch.com/blog/
In the style sheet, I see some garbage characters right in front of the
body{ background-image:url('images/bg.gif');
line in the css file. Those might be making the rendering skip the rule. I'd backspace and clean that up.
It looks like you background image is located here:
http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif
So first of all try an absolute address like so:
background-image: url('/blog/wp-content/themes/bloo_06/images/bg.gif');
However if that works, you really want a relative URL, so take a look at the directory structure of your theme and ensure the background image is indeed relative to the css file you have written that rule in, in the way you have written.
Check that you have uploaded the correct image to the correct place. When I tried to view the image I could see a very small and transparant image. http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif .

modifying background

I am a beginner in HTML and am taking a Multimedia class for school. I noticed for many websites such as ESPN, CNN, Google, etc. that there was no direct image source for the entire background. How might I be able to incorporate an image for an entire background of a website? Thanks I appreciate it!
OH ok I see the problem, I was in HTML, not CSS. So where do I find the source file? I know in HTML if there is a image placed it will usually be followed by something like img src etc., and the image I want to use I usually copy the image location and paste, is this the same for this? Also I see in the CSS script the words
body {
margin:0;
Something like that?
With CSS:
body
{
background-image:url('myImage.gif');
}
Your question is not so clear though...
If you are trying to add the background image into your HTML, I would add it to the body div:
<body background="blue.jpg">
If you want to add it to your CSS or stylesheet, use this:
body {background: url(blue.jpg); }
Does that answer your question?