Is There any way in CSS to Hide the Background Image from top when i resize the browser by changing the height and Hide the Background Image from right when i resize the browser by changing the width without the image gets shrink. Im able to achieve only hiding from right on maximum height. If I tried to resize on both sides the image gets shrink and not hided. Below is my CSS code.
body {
background-image:url("");
background-size:cover;
background-position:bottom left;
}
I want to hide the background image from top and right when I resize from any direction and for any width and height. Can someone plz help.
please check this for a try
#media (max-width:1200px){
body { background:none !important; }
}
Related
I can't make the header image's height bigger. I found some CSS that made the container height bigger. But every time I change the photo out, it is still the original height: 75px;.
.container {
width:100%;
height:200px;
float:left;
margin-top:2px;
}
thml
html
What am I doing wrong?
From the screenshot i did not see any image element. If you want the image to to follow have a fixed height, you can set a height to the image itself, but if you want the image to follow the container's height, then u need to give a height to the direct container of the image, at the same time give a height to the image, 100% if you want the image to follow the height of the container.
From the code you provided. your .container has a height of 200px. If the image is inside this container, and you wish to make the image exactly 200px as the .container, then you need to add .container img{height:100%} to the image.
Try this CSS rule:
header {
min-height: 50% !important;
}
There should be something below the image that is blocking your height.
Make sure to check from the inspect element
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.
I know how to align my background image as well as my #wrapper div tag, but I am unable to get them to line up the way I want. Here is the example:
http://www.marathoneindhoven.nl/
The blue runner stays locked to the main div tag when resizing the window. If I add a large #container around the whole #wrapper, when I resize the browser I have a big space on the left side of the screen because the overall width of the #container is still trying to center itself. I have tried using the css property overflow but can not seem to get that to work either.
How can I possibly get this to work??
If you want the blue runner to move with the page then change your css to this:
#wrapper {
background: url(/images/bg-runner.png) right 0 top 150px no-repeat;
}
I'm trying to show the original size of the image. Often that's bigger than the width of the div that's containing it.
In modern browsers, it gets automatically resized to fit the parent div. Even when I use overflow: auto the image still gets resized.
So how can I prevent the image from getting resized when the outer div has a set width?
Thank you!
Bootstrap have maximum width set to 100% on images. Change it:
img {
max-width: none;
}
I used this one img {min-width:100%}
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;
}