Background picture Bottom Right

Hi I’m trying to move my image to the bottom right of a section on my website. This is the css code i’ve used

background-image: url(“http://k4digitalmarketing.com/wp-content/uploads/2017/07/logo-imgEdit.png”);
_ background-position: right bottom ;_
_ background-repeat: no-repeat;_
_ background-size:contain;_

But it doesn’t sit right in the bottom hand corner.

Heres my site http://k4digitalmarketing.com/ and its in the “Meet Us In Person” Section

Any help would be much appreciated

It looks bottom right to me, just where you told it to be.
Though using contain, it wont appear to be bottom because that will fill the space, making it central.

Thanks for your reply.

I want it in the bottom corner with some of the picture slightly visible. Also when I made it cover is didn’t look great

What do you mean by that?

Then you need to choose a size that fits your needs, perhaps a % would do it, but I’m not sure what you want.

Hi there 05beckga,

without content the “body element” has no height -
( as in space ) for the background image to occupy. :wonky:

In that situation you will need to code it like this…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
   background-image: url(http://k4digitalmarketing.com/wp-content/uploads/2017/07/logo-imgEdit.png);
   background-position: right bottom ;
   background-repeat: no-repeat;
   background-size: 5em auto;
   background-attachment: fixed;
 }
</style>
</head>
<body> 
</body>
</html>

coothead

I mean slightly not visible. So half the picture is not showing.

Giving it a larger size will make it exceed the size of its container.

Hi there 05beckga,

as you did not say which half to hide this…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
   background-image: url(http://k4digitalmarketing.com/wp-content/uploads/2017/07/logo-imgEdit.png);
   background-position: right -18.75em  bottom -18.75em;
   background-repeat: no-repeat;
   background-size: 37.5em auto;
   background-attachment: fixed;
 }
</style>
</head>
<body> 
</body>
</html> 

…will show one quarter of the image .:winky:

coothead

1 Like

What if you applied the CSS to an element up the DOM tree a little?

First, comment out (in case you don’t like my solution) the CSS on “intro-of”.

Then try something like this:

div.full_width_inner div.meet-pers {
    background-image: url(http://k4digitalmarketing.com/wp-content/uploads/2017/07/logo-imgEdit.png);
    background-size: auto;
    background-position: calc(100% + 240px) calc(100% + 370px);
}

I got this from this article.

So if the CSS above doesn’t work, poke around on there and maybe you can find what you need.

Good luck.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.