I have a container and wallpaper inside a page.
What I'm trying to do is to resize the container and the wallpaper to mach any device screen size.
I have managed to make the wallpaper working, but the container doesnt work for me.
What I'm doing wrong?
This is my code:
html,body{height:100%}
#left-link {
position: fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:99;
width:auto;
height:auto;
}
#container {
width:500px;
margin:0 auto;
margin-top:10px;
position:relative;
z-index:100;
}
body {
margin: 30px 0 0 0;
background: url(https://example.com/.jpg) no-repeat center center fixed;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
The container is set at 500px, which is a set size. If you want it to be responsive, set it to a percentage such as 50%, which would be half of the page.
You seem to have hard-coded the container to remain 500px at every viewport width.
This can be solved by the more general solution of never using absolute units for anything.
Anything like "px", "in", "cm" are absolute units and should be avoided.
Instead use relative units: "em" (or if you must, "rem") when legibility is the main concern (e.g. reading some lettering in an image); and "%" (or "vh" and "vw") when overall layout is the main concern.
Your example has "500px", "10px", and "30px".
It would be more "responsive" if instead it had, say "90%", ".5em", and "4%".
And to make things fit into containers the way you would expect them to:
* { box-sizing: border-box; }
Related
I have found a good solution for Swiper with the gallery and it works great but there is a problem with height on mobile devices:
I have tried to replace this height: 500px to any dynamic but every time it's hiding without status height. Is there any solution to make it scalable without media queries?
https://jsfiddle.net/vertisan/j8a46vcg/1/
What about this https://jsfiddle.net/q1vr473z/ if u want just give max height
html,body,.container{
height:100%;
width:100%;
}
#slider {
height: 80%;
max-height:500px;
}
Change the background-size
.swiper-slide {
background-size: auto 100%;
background-position: center center;
background-repeat: no-repeat;
}
I am in the process of creating a simple placeholder page to announce a new website. The page consists of nothing other than
a centered background logo image
a "catch phrase" immediately below that image
I thought this would be easy - I place a positioned background image with its size specified and then place an absolutely positioned h1 header to get the "catch phrase" right below the background image.
*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5%;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5%;
right:0;
left:0;
}
<h1>CSS3 is Cool!</h1>
This is working to the understanding that
background-origin:border-box;
background-position:center 37.5% with
background-size:auto 25% would
yield an image with
The background image centered horizontally with its top left hand corner at 37% of its container height (set to 100vh)
The absolutely positioned h1element is at (37.5 + 25)% from the top
For good measure I set padding:0and margin:0on everything. However, the end result is not quite as expected - there is still way too much space between the bottom of the logo image and the top of the h1header. Clearly, I am misunderstanding some aspect of background positioning and/or size here. I'd be much obliged to anyone who might be able to put me on the right track
When using percent for background images, it doesn't work at all as one first think.
When you set background position using percent, that positions the image such that X% of the way across itself aligns with X% of the way across the element. This article at CSS Tricks shows it quite well: percentage-background-position-works
Use viewport height units vh instead
*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5vh;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5vh;
right:0;
left:0;
}
<h1>CSS3 is Cool!</h1>
Referring to this website – www.mrandmrsbutt.com – I'm trying to position the 'Upwaltham Barns' graphic at the bottom centre of the viewport, so no matter what size the viewport is the graphic will move with it and stay at the bottom.
I've tried adding the following custom CSS into my WordPress site, but it doesn't seem to work:
.fix{
position:absolute;
bottom:0px;
left:50%;
}
<img src="http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/banner-cta.png" class="fix"/>
Here is all my custom CSS at the moment:
#site-header.overlay-header{background-color:#fff;}
.menu-item a span:hover{color:#dfb5a9;}
#main-banner{
background-image:url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/Top-Banner-Background.jpg);
background-size:cover;
background-position:center center;
height:100vh;
}
.centre{
display:inline-block;
text-align:center;
}
#navigation-bar{
background-image:url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/navigation-background.jpg);
background-repeat:repeat-x;
height:48px;
}
p{margin-bottom:10px;}
.paper-background{
background: #fff url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/white-background.jpg) repeat top left;
}
Can anyone help?
You don't want position: fixed;, you're on the right path using absolute.
The problem is that the parent divs of what you're targeting aren't all 100% height of the viewport. You've set the outer-most parent to height: 100vh;, but it really needs applying to the inner .vc_column_container container (as it's using bootstrap based styles, and BS columns get position relative) - so your down arrow and graphic are being positioned based on that.
Try something like this:
#main-banner .wpex-vc-columns-wrap .vc_column_container {
height: 100vh;
}
#main-banner .wpex-vc-columns-wrap .vc_inner::last-child {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2.5%;
}
That should get you closer to what you're aiming for, be sure to include all vendor prefixes with transform, however if you're using something like Autoprefixer or Bourbon you'll already have this covered...
There's some "custom" styles in there I'm guessing you've added from a page-builder that might mess the position of the graphic/arrow up, remove the unnecessary padding if it's bugging out.
Good luck with the wedding :-)
I think you need to change position:absolute to position:fixed in the .fix rule
.fix{
position:fixed;
bottom:0px;
left:50%;
}
This should send your graphic to the bottom of the viewport and left there even scrolling. The horizontal center could be a bit tricky, but you could try to use a fixed container with left and right set to 0.
.fixed-container{
position:fixed;
bottom:0px;
left:0;
right: 0;
}
The previous rule sets the container to the bottom of the viewport and extends horizontally.
img.centered {
margin-left: auto;
margin-right: auto;
display: inline-block;
}
This rule is applied to the image to achieve centered alignment inside the container.
HTML code:
<div class="fixed-container">
<img class="centered" src="..image..." />
</div>
I think this should do the trick.
I created a <div> first thing in the <body> to draw a top line at the top of the page:
<body>
<div class="bordertop"></div>
.....
</body>
and the style:
body {
font-family: Helvetica, Arial, sans-serif;
-webkit-text-size-adjust: 100%;
margin:0;
}
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
}
However, the top_border image doesn't appear unless I write some text inside the <div> but I don't want to. How could I fix this?
Since the div is empty, there's no content to push it "open" leaving the div to be 0px tall. Set explicit dimensions on the div and you should see the background image.
.bordertop
{
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
height: 100px;
width: 100%; /* may not be necessary */
}
You might need to set the css width and height of your <div> element to whatever size you want
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
width: 200px;
height: 100px;
}
Give the div a height:1px. That should work. Otherwise your div is 0px high, meaning you won't see anything.
You could also give it padding-top:1px
Another thing you could do is to set the background-image of the line on the body in your CSS. This is assuming the line is the entire width of the body.
See demo
As the answers above me suggest ^^' it's because it has virtually no size, you need either to put content inside to resize it or to set width/height or padding in css bordertop class, or you can put another empty inside it with set size. I was going to skip this answer since there are already answers but I just wanted to add that width/height is not your only option.
On a side note, oh man, people here posting so fast I sometimes wonder if its a race and what is the prize, there must be some, I guess helping other is itself great prize. :) When I was starting to type this there was no answer yet.
The best way I have found is:
for landscape:
width:100%;
height:0;
padding-top:[ratio]%;
for portrait:
width:[ratio]%;
height:0;
padding-top:100%;
You need to determine which side is longer and accept this dimension as 100%
then calculate [ratio] - percentage of shorter dimension in relation to 100% longer dimension. Then use the one of solutions above.
I had the same problem for quite some time, my solution was giving the style lines of: min-height. This opens the div to the height given if there is no elements inside. The height can get bigger with the more elements inside, but not smaller.
Example code:
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
/* Center the background image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background image to be as large as possible */
background-size: cover;
}
code gotten from https://www.w3schools.com/cssref/pr_background-attachment.asp
If it is the only div element in the body use the following style to to make it occupy the full-width.
.bordertop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image:
url('../images/top_border.png');
}
I couldn't get my background showing in the div even with the width set up. Turns out i had to put "../" in the url section then it showed the picture i was struggling for quite a while.
left {
width: 800px;
height: auto;
min-height: 100%;
position: relative;
background-image: url("../img/loginpic.jpg");
background-size: cover;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: crimson;
}
Otherwise, you can just open a <p></p> and in styles, remove the default margin length, that's margin: 0; and add height: 0.1px which doesn't consume much space, so it'll work.
Note: it'll work properly until it's not zoomed out more than 50%, so make sure of the use case before you apply it to the body.
I'm using
background-size: 100%;
To fit my background image (in the body-tag) to the browser window.
But is there a CSS3 background-property to set a minimum-size?
Or will I need some div-"trick" like:
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
I think you are looking for
background-size: contain;
OR
background-size: cover;
The difference being that cover specifies that the background image should be as small as possible while maintaining its aspect ratio. contain on the other hand specifies that the background image should be as large as possible.
See the MDN documentation here.
How about adding this:
#media screen and (max-width:700px){
#bg img { width: 500px; /* fixed width under 700px */ }
}
A bit late to this question but for anyone wondering, now you can!
Say you want to have a background image take up 100% height of parent but also have a minimum height of 200px (e.g. in case parent height is less than 200px).
We can use max() to get the maximum value from two numbers so if 100% height > 200px it will use 100% but if not it will stop at 200px effectively making 200px the minimum height.
body {
background-size: 100% max(200px, 100%);
}