Scenario :
I have a Wordpress site which has an old theme and doesn't allow me to change the header image.
As a workaround on a page where I want a different image, I have
hidden the header image using CSS and replaced it with a background
image, which works fine and is responsive.
Todo :
However I needed to set a height for the area in order to make a space for the bg image to show up at full size (which I have done using a "padding-top")
which causes a large space underneath the background image whenever
the window is resized down, or on phones.
Is there a way to make the
space underneath the image collapse down as the image also collapses
down?
URL: http://www.annareynolds.org/lovehobart/
My Custom CSS:
.singular-page-691 #header img {
display:none;
}
.singular-page-691 #branding {
padding-top:390px;
background-image:url(http://www.annareynolds.org/wp-content/uploads/2018/08/love-hobart-crop.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position:top left;
}
only use padding in %
like:
.singular-page-691 #branding {
padding-top: 40%;}
http://prntscr.com/kj6z3j
I have visited the link you have provided and checked the responsive. I assume that I worked on the right place as your question asked.
You have paddding-top:390px in .singular-page-691 #branding It cause the space you mentioned. You can adjust the value of padding-top in responsive. I tried with padding-top:180px and it seems fine for me.
Related
I uploaded a custom image to my WordPress site to use as a header background. I have it displayed using the following CSS:
.main-header-bar {background-image: url("image url");
background-repeat: no-repeat;
background-size: 100%;}
This allows the image to stretch the width of the screen even when the screen size changes.
The challenge I need help with is getting the height to adjust along with the width.
I think the issue is the height of the header area is defined by the font size chosen for the site title, the tagline, and the menus. To illustrate, when I move the browser window from a medium sized screen to a large one, my image size increases to match the size of the new monitor, but the font of the title, tagline, and menus remains the same. Because the height is now insufficient to contain the image now that it is wider and taller, it cuts off the bottom of the image.
Is there an elegant way to address this?
For reference, I am using the Astra theme.
Thanks!
UPDATE: I've done some more experimenting. I've discovered that the image is not actually "cut off" per se. The whole thing is there. However, on the larger screen, at the normal 100% zoom, the content of the page is displayed overlapping the image. If I zoom in, the image remains at 100% the width of the page while the title, tagline, menus, and content enlarge. The title expanding pushes the content down and the entire image becomes visible.
What I'd like is for the title and the header to be in sync with one another. Right now the image size is set relative to the screen size (100%), while the text size is set by a font. Is there a way to tie these to things together so there is a consistent appearance?
UPDATE:
I think I figured it out, mostly. I'm sure I'm doing something sloppily because I don't quite understand it all. By calculating a font size and using "vw" it makes the font size adjust based on the width of the screen instead of pixels. Since my header image also does that, it lines up (not perfectly, but it works between the screens I'm testing on well enough). Here is the code I added:
html { font-size: calc(0.75em + 0.5vw) }
.site-title {
font-size: calc(7.1vw)}
.site-description {font-size: calc(1.6vw) !important;}
.menu-item {
font-size: calc(1.8vw);}
How about trying it with a media query to satisfy the larger viewport.
.main-header-bar {
background-image: url("image url");
background-repeat: no-repeat;
background-size: 100%;
}
#media only screen and (min-width: 600px) {
.main-header-bar {
background-image: url("image url");
background-repeat: no-repeat;
background-size: cover;
}
}
I want the gray background to continue all the way to the height of the current window. I tried setting height to 100% of #default-wrapper-body, but that doesn't appear to do anything.
See it live here: http://www.zorgbeurs.nl and even more prominent here: http://www.zorgbeurs.nl/aanmelden
I've also added an image, the areas in the right boxes should run to the bottom of the page, on all pages, not just the homepage.
This is happening because the browser can't detect the height of the footer for one reason or another, also your not use a wrapper on all elements, a quick fix would be to add the following CSS to your stylesheet:
#footer_footnote_wrapper {
height: 80px;
border-bottom: 1px solid #DCDCDC;
}
html, body {background:#f3f3f3;}
html, body, form, #default-wrapper-body { height: 100%; }
… does the trick, see here: http://codepen.io/zitrusfrisch/pen/ouEdI
Better move the form inside the #default-wrapper-body to prevent all forms being stretched to 100% height though.
I think the cookiebar div is causing your white stripe at the bottom, it has background:none; and when its visible the background looks fine, all the way to the bottom.
I am using blogger and recently inserted this cc code in to the advanced section of the template designer to input a background image
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
}
.body-fauxcolumn-outer div {
background: none !important;
}
The problem is that when the browser window is resized the background stays the same but all the widgets/elements on the page resize along with the window.
See www.ashlylondon.blogspot.com
I need the background to resize along with the widgets so that they stay in the white area on the background image.
You are relying on background resizing so much that your layout won't work without it. That's not ideal. The typical approach to a situation like this would be:
Have a background image that covers the entire screen
Give the <div> element that contains the actual content a background-color: white property.
You can still use background-size to scale your background image to the screen size, but it no longer is necessary for the layout to work.
this woul make sure your content is always readable no matter what; it'll work where background-size won't, e.g. in older browsers and some mobile devices.
add this to your css
body{background-size:100%;}
try this
add in body class background-size:cover;
http://jsfiddle.net/pyFbF/3/
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
background-size:cover;
}
.body-fauxcolumn-outer div {
background: none !important;
}
I am building a single page site constructed of 4 divs, one on top of the other and each one with its own fixed background image. The images are much wider than the screen as I want to site to keep its look across a large range of screen sizes, however does anyone know how to truely center a background image. So in a small monitor they would be viewing the center of the image, and in a larger monitor they would see the same place of the image, just with more around it. Just like this site has
http://www.cantilever-chippy.co.uk/
When the window is resized the background image moves accordingly.
Many Thanks.
If you check the css from your link you see the solution:
#images #bg_1 {
background-image: url(images/bg/1.jpg);
background-position: 50% 0;
}
And the div:
<div class="bg_block" id="bg_1" style="height: 1200px; width: 1055px;"></div>
By JavaScript they change the width of #bg_1 on every resize.
window.onresize = function(event) {
$("#bg_1").css("width", $(window).width());
}
This should work
#bg{
background-image:url(yourURL);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
The background-fixed property is for Firefox and Opera.
You're looking for the background-position CSS property.
http://www.w3schools.com/cssref/pr_background-position.asp
It can take an absolute offset in pixels (so if you know the size of your image and the size of the div you could calculate exactly where you want it to appear). Or, you can pass in a percentage. It can also take a negative numbers so you can offset it off the screen in any direction.
For your case, though, you probably want the simple "center" value. Something like this should work:
/* This should center the background image in the div. */
div.background_image_block {
background-position: center center;
}
I basically made a header image for my site and the sides of it have black on it. I want to extend the header so it goes for the width of the user's web browser with black "bars" as if the header extends for their whole browser.
I've tried a few things, but I cant figure this out.
Here's an example of what I have now:
#header {
background: url('img/header.png') no-repeat top center;
height: 131px;
}
#headerbg {
height: 131px;
width:4000px;
background-color:#000;
}
And in the html I just have both in divs and within each other in the html.
Here's a jsFiddle that shows you how to layer the two div's and use background-size property to expand the image so it fits just the same as the background color's width. UPDATE: New jsFiddle above is replaced to include better method for that type of look.
Edit: Here is a different jsFiddle that has places the image inside and centers it, allowing any excess background color from the parent container to show through.
Edit 2: Using the Edit fiddle above, you can apply CSS3/IE gradient effect as shown in this jsFiddle
Status: The solution was to use center center for background-position combined with setting both width and height to 100% for the image used.