Stick background image in same position relative to content across devices - html

I have a website where I want the header background to be at the same exact position no matter what the screen size/device. I want the center of the lines to "stick" to the dot in the h1.
I came close, but there is a bug which I think is caused by the div's height, when I resize my browser to the same size as an iPhone 5, the background is in a slightly different place, so using background-position to keep the center under the dot is not possible. I want to avoid this, the part where the lines cross leaving the dot.
I don't care if the background gets clipped by the browser boundary. I just want the center of the lines to always stay under the dot! How do I achieve this? I can't post the original code what is on the server(I use stylus), but here is what I have which produces the same bugs:
#header
height: 344px
max-width: 435px
margin: 0 auto
background: no-repeat url('/img/lines.png')
background-position: -52px -2px
background-size: 100%
+below(435px)
background-size: 320px
background-position auto
//haj.zso text
h1
text-align: center
padding-top: 137px
font-size: 65px
font-weight: 700
font-style: italic
letter-spacing: -3.7px
margin: 0
<div id="wrapper">
<div id="header" class="animated zoomIn">
<h1 class="animated fadeInDownBig">haj.zso</h1>
</div>
I've only been playing around with the height, max-width, background-position, background-attachment and background-size properties, without luck... I feel that I'm not taking the right approach to this at all.
I didn't upload it as an image because I wan't to animate the lines later, and add a bg-clip on hover to the text.

Try to replace your css with this one
#header {
height: 344px;
max-width: 485px;
margin: 0 auto;
background: url("/img/lines.png") no-repeat;
background-position: center;
background-size: cover;
background-position-x: -57px;
}
#media only screen and (max-width: 400px){
#header {
max-width: 320px;
background-size: cover;
background-position-x: -111px;
}
}

Related

CSS Background Image not covering whole viewport width

CSS background is not covering whole viewport width while using media query #media (max-width: 62.5em)
I tried using background-size: cover, background-position: top left, background-repeat: no-repeat but still nothing works.
here's main CSS styles of that section.
max-width: 100vw;
min-height: 100vh;
background: url(../images/bg-hero-desktop.svg);
background-color: #ebfbff;
background-size: cover;
background-repeat: no-repeat;
padding-top: 20rem;
padding-left: 5rem;
This is a fairly common error that I experience at times while working on layout.
The problem is NOT with the background of the html component, but rather with the layout on your footer, and your footer-cta-box div. These elements are pushing the layout outside of the viewport which is what is making it appear as though the background for the html is not rendering correctly. If you use "Inspect" in your browser to temporarily take out those elements you will see that the html background renders correctly! You're doing things right!
I'm not sure exactly how you want the footer and footer-cta-box to be laid out on the page, or else I could help you to get them in the right place, but those are the culprits of the problem.
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background: url(https://www.nasa.gov/images/content/296150main_2-226.jpg) no-repeat center center fixed;
background-size: cover;
}
main {
color: white;
}
<main>Hello world</main>
try
background-size: contain;
or
background-size: 100%;
instead of
background-size: cover;

Fix full screen background image on Squarespace page

I'm having issues getting background images to display full screen (take up the whole background space) with a Squarespace page. My CSS was working but somehow it stopped working and now I have a gap on the bottom of the screen. The issues i've been having with Squarespace and how it sets up HTML for you, so recreating this issue really does not help. Instead, you can view the page at richiequake.com and use the password Help123 to access it. This issue happens in the Desktop version and Mobile version of the page. This is my CSS for Desktop:
#collection-5de6d28545f1a7075b7a2741 #canvas{
max-width: 100% !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 11px !important;
background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
For mobile I've been trying:
#media only screen and (max-width: 400px) {
#collection-5de6d28545f1a7075b7a2741 .canvas{
max-width: 100% !important;
max-height: 100% !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 11px !important;
background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
I think my issue is with an HTML element that is taking up the space at the bottom of the screen, but I can't find this element and have not found a way to have the background image take up the whole space. What do I need in my CSS code to fix this? Am I using CSS on the wrong HTML element?
To address just the height of that particular image background, add the following:
min-height: calc(100vh - 11px);
Add it within the #collection-5de6d28545f1a7075b7a2741 #canvas{...} rules you already have and that should work. Note that the 11px is based on the value you currently have for padding-top. If you were to change that value, you'd want to similarly update it within the min-height rule as well.
What that is doing is saying, basically "if the content of the page isn't tall enough to fill the current height of the browser window, use a minimum height of however tall the browser is, minus the padding-top amount on the element".

Background image display specific portion of the image

I have an image here that I only want a specific position what to display. But mine is not working. I only want the hands to view without cropping the original image. Thanks in advance
Expected result
HTML
<div class="banner">
<h1>できる限り<br>
自然な形で育てた<br>
こだわりの野菜です。</h1>
<h4>生産者/川口太郎・川口久美子さん(安芸市)</h4>
</div>
CSS
.banner{
background: url(../img/img1.png);
background-size: 100%;
padding: 32% 0 5% 6%;
color: white;
letter-spacing: 0.1em;
border-radius: 1%;
}
Combination of background-size and background-position CSS attributes. Dont forget you can make the background-size value greater than 100%. I would throw this at it and fine tune from there:
.banner{
background: url(../img/img1.png);
// background-size takes height and width but shorthand is one value used for both
background-size: 200%;
// background-position options include center, cover, and more: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
background-position: center center;
}
Use CSS Clip. You can crop your image on the page without having to edit the original image source file.
https://www.w3schools.com/cssref/pr_pos_clip.asp
Looking your expected image, I thing you can try this:
background-repeat: no-repeat;
background-size: cover;
background-position: top;

How to make an image remain in its same size

I put an image in the center over a fixed background image and I would like the image to stay the exact same size (not grow smaller nor bigger) when rendering the page smaller or bigger in any way (left to right and top to bottom).
I tried min-width and max-width, which made the image stay the same size when rendering the page from left or right, but the image does grow smaller or bigger when rendering the page from up or bottom.
Any help will be welcomed
body {
background-image: url(http://www.icotoken.tel/images/slider_slide_5.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
text-align: center;
}
.still{
padding-top: 30px;
}
<img
src= "http://www.comptonacres.co.uk/wp-content/uploads/2015/03/compton-acres-poole-dorset-the-japanese-garden-02-1024x576.jpg" class= "still"
style="width:90%"
>
If you can remove the inline styles and access css give it a fixed width:
.still {
display: block;
width: 300px;
margin: 0 auto;
}
Otherwise in html change style="width: 90%" to style="display: block; width: 300px; margin: 0 auto;"
You can use <img width="300"> it is one of default img
tag properties and don't use percentages if you wanna fixed sizes

CSS background image to fit width, height should auto-scale in proportion

I have
body {
background: url(images/background.svg);
}
The desired effect is that this background image will have width equal to that of the page, height changing to maintain the proportion. e.g. if the original image happens to be 100*200 (any units) and the body is 600px wide, the background image should end up being 1200px high. The height should change automatically if the window is resized. Is this possible?
At the moment, Firefox looks like it's making the height fit and then adjusting the width. Is this perhaps because the height is the longest dimension and it's trying to avoid cropping? I want to crop vertically, then scroll: no horizontal repeat.
Also, Chrome is placing the image in the centre, no repeat, even when background-repeat:repeat is given explicitly, which is the default anyway.
There is a CSS3 property for this, namely background-size (compatibility check). While one can set length values, it's usually used with the special values contain and cover. In your specific case, you should use cover:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
Eggsplanation for contain and cover
Sorry for the bad pun, but I'm going to use the picture of the day by Biswarup Ganguly for demonstration. Lets say that this is your screen, and the gray area is outside of your visible screen. For demonstration, I'm going to assume a 16x9 ratio.
We want to use the aforementioned picture of the day as a background. However, we cropped the image to 4x3 for some reason. We could set the background-size property to some fixed length, but we will focus on contain and cover. Note that I also assume that we didn't mangle the width and/or height of body.
contain
contain
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
This makes sure that the background image is always completely contained in the background positioning area, however, there could be some empty space filled with your background-color in this case:
cover
cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
This makes sure that the background image is covering everything. There will be no visible background-color, however depending on the screen's ratio a great part of your image could be cut off:
Demonstration with actual code
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
Based on tips from https://developer.mozilla.org/en-US/docs/CSS/background-size I end up with the following recipe that worked for me
body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url('index.png');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
Background image is not Set Perfect then his css is problem create so his css file change to below code
html {
background-image: url("example.png");
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
}
%; background-size: 100% 100%;"
I'm not sure what you're looking for exactly, but you really should check out these excellent blog posts written by Chris Coyier from CSS-Tricks:
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
Read the descriptions for each of the articles and see if they're what you're looking for.
The first answers the following question:
Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Also, make sure it retains its ratio (doesn't stretch weird). Also, doesn't cause scrollbars, just cuts off vertically if it needs to. Also, comes in on the page as an inline tag.
The second post's goal is to get the following, a "background image on a website that covers the entire browser window at all times. "
Hope this helps.
Just add this one line:
.your-class {
height: 100vh;
}
vh is viewport height.
This will automatically scale to fit the device' browser window.
Check more here: Make div 100% height of browser window
body{
background-image: url(../url/imageName.jpg);
background-attachment: fixed;
background-size: auto 100%;
background-position: center;
}
Try this,
element.style {
background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
I had the same issue, unable to resize the image when adjusting browser dimensions.
Bad Code:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
Good Code:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: contain;
}
The key here is the addition of this element -> background-size: contain;
Here's what worked for me:
background-size: auto 100%;
width: 100%;
height: 100vh;
background: url("../img/hero-bg.jpg") top center;
background-size: cover;
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
if you set min-height, for example:
min-height: 100vh;
You can use the below code to fit your background easily
body {
background: url(images/background.svg);
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
Setting background size does not help, the following solution worked for me:
.class {
background-image: url(blablabla.jpg);
/* Add this */
height: auto;
}
It basically crops the image and makes it fit in, background-size: contain/cover still didn't make it fit.