have an image uploaded to S3 here:
https://s3-eu-west-1.amazonaws.com/buildsanctuary/images/1458083137.png
You can see that the browser is showing it in the correct orientation.
However, if you check this fiddle: https://jsfiddle.net/2oz06kv4/1/
The orientation is incorrect.
How can I remedy this?
The code for how im showing this image:
.profile-image {
height: 200px;
width: 150px;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
background-color: blue;
}
Related
I've got a 8192x8192 image which should be used as a background image. It shows the image but only the half and I've got no clue how to scale the height correctly.
My CSS code:
body {
background: url('../img/atlas.png') no-repeat;
background-size: cover;
height: 100%;
width: 100%;}
Is it what you want?
body {
background: url(https://source.unsplash.com/IvfoDk30JnI/1500x1000) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
working with wordpress, I have created a page you can see here please do to the Schoonmaakwerk is mensenwerk as you can see it looks like this:
while the image is this:
I want to be able to display the full image. here is my code for the image part:
#mainSchoonMaker {
background: url(https://www.haagsehof.nl/content/uploads/2018/02/20171120_Haagsehof_1300_blackoverlay.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
if I add no-repeat the image is gone. I want this image to be able scroll able and goes up and dwon with scrolling of the page, anyone any idea how to do this?
Try this one:
#mainSchoonMaker {
background: url(https://www.haagsehof.nl/content/uploads/2018/02/20171120_Haagsehof_1300_blackoverlay.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: auto;
}
Try this code.
#media (min-width:767px){
#pl-4 {
background: url(https://www.haagsehof.nl/content/uploads/2018/02/20171120_Haagsehof_1300_blackoverlay.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
margin-left: -15px;
margin-right: -15px;
}
}
#media (max-width:768px){
#pl-4 {
background: url(https://www.haagsehof.nl/content/uploads/2018/02/20171120_Haagsehof_1300_blackoverlay.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-left: -15px;
margin-right: -15px;
}
}
Are you dealing with featured images in your theme?
If so, the issue may actually be in the code for your featured image within your theme. Thumbnail (featured image) size can be determined within the media settings in your WordPress site, but featured image sizes can also be manually specified via functions. Here's the developer documentation for building-in functions like this.
https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
The image may end up being the wrong size, because WordPress is giving you a custom size automatically due to either your media settings or a theme-specific function.
I've looked at a other similar thread and can't seem to find the answer.
Look at the shield background image. It's cut off slightly at the top and bottom... I've tried a lot of things but I can't get it to display properly.
Here is the site http://revivedlife.com
Here's the css for the background image:
.hentry h2 {
background: url(images/post_element.png) no-repeat 0 -4px;
display: inline-block;
}
Try replacing your existing css with this:
.hentry h2 {
background: url(LOCATION HERE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will make sure the background image looks correct, even on old browsers.
Have you tried background-size: cover;
I think the following code may help you :)
.hentry h2 {
background-attachment: fixed;
background-image: url("http://revivedlife.com/wp-content/uploads/2016/03/bg_body.jpg");
background-position: left top;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm trying to make a website on a single page, with every section of the page taking up exactly the size of the user screen (using backstrech for backgrounds).
Like this: http://projects.lukehaas.me/scrollify/#home
The problem comes when the user's screen height is too small to contain my page's content. In that case, I want my background to stretch more than the user's screen, as it has to fill the entire content's background.
So, I've been using overflow:scroll, which fix the entire problem except for displaying an annoying horizontal scroll bar, even when it is not needed. What I mean is, even at full-screen when there's no overflow at all, the horizontal scrollbar appears
This is my code:
section#page1 {
background: url('../img/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: scroll; }
try this:
section#page1 {
background: url('../img/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
section#page1 {
background: url('../img/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: auto;
}
I'm trying to have my billboard image approximately 2200px 965px fix inside of an div expanding the width of the screen and 500px in height, without losing any parts of the image. Is this possible, I have problem completing this task.
<div class="billboard"> </div>
css:
height: 500px;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
display:block;
width:100%;
Yes, simply add width: 1140px to your CSS code to make sure that it doesn't get chopped off at all.
If this is what you want, background image not getting chopped off, but generating an ugly output.
Note : The image I used has exactly the same dimensions as you provided (2200px by 965px)
.billboard {
height: 500px;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: 100% 500px;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 500px;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/0a/Transjorund_Oulu_2007_05_20.JPG);
width: 100%;
display: block;
}
<div class="billboard">ABV</div>
Here if the snippet is not working: JSfiddle