CSS picture positioning.

+3 Remy Gagnon · February 5, 2016
Hey, so im building a website for a small business in my town and I now have a problem. I build using CSS templates because im really not qualified enough to do it without them. Here is what it looks like.
and here is the code that is important for my question ( I think)


<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header-wrapper">
<img id="header">

<!-- Logo -->
<!-- Nav -->
<!--div id="potato">
<img src="images/logo.jpg" width="200" >
<nav id="nav">
<ul align="center">
<li class="current"><a href="index.html">Accueil</a></li>
<a href="#">Notre Équipe</a>
<li><a href="mission.html">Notre Mission</a></li>
<li><a href="therapeutes.html">Nos Thérapeutes</a></li>
<li><a href="politique.html">Politique de Confidentialité</a></li>
<a href="#">Nos Services</a>
<li><a href="services.html">Liste des Services et des Prix</a></li>
<li><a href="paiments.html">Méthodes de paiments</a></li>
<li><a href="garantie.html">Garantie des Rendez-vous</a></li>

<li><a href="rendezvous.html">Rendez-Vous</a></li>
<li><a href="nousjoindre.html">Nous Joindre</a></li>


/* Nav */

#nav > ul {
margin: 0;

#nav > ul > li {
display: inline-block;
font-style: italic;
margin: 0 0.35em 0 0.35em;

#nav > ul > li > ul {
display: none;

#nav > ul > li > a {
border-radius: 5px;
color: #5d5d5d;
text-decoration: none;
padding: 0.6em 1.2em 0.6em 1.2em;
-moz-transition: background-color .25s ease-in-out;
-webkit-transition: background-color .25s ease-in-out;
-ms-transition: background-color .25s ease-in-out;
transition: background-color .25s ease-in-out;
outline: 0;

#nav > ul > li:hover > a, #nav > ul > li.active > a {
background: #f3f3f3;

#nav > ul > li.current > a {
background: #8DB048;
color: #fff !important;
font-weight: 700;

.dropotron {
border-radius: 5px;
background-color: #ffffff;
background-color: #ffffff;
padding: 1.25em 1.5em 1.25em 1.5em;
font-style: italic;
min-width: 13em;
box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.5);
text-align: left;
margin-top: -1.25em;
margin-left: -1px;

.dropotron a, .dropotron span {
color: #aaa;
text-decoration: none;
-moz-transition: color .25s ease-in-out;
-webkit-transition: color .25s ease-in-out;
-ms-transition: color .25s ease-in-out;
transition: color .25s ease-in-out;

.dropotron li {
padding: 0.25em 0 0.25em 0;

.dropotron li:hover > a, .dropotron li:hover > span {
color: #252122;

.dropotron.level-0 {
margin-top: 2em;

.dropotron.level-0:before {
content: '';
display: block;
position: absolute;
left: 50%;
margin-left: -10px;
top: -9px;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
border-bottom: solid 10px #ffffff;
border-bottom-color: #ffffff;

/* Banner */

#banner {
position: relative;
padding: 8em 0;
margin: 4em 0 0 0;

#banner header {
display: inline-block;
padding: 2.5em 5em;
border-radius: 5px;

#banner header h2 {
font-size: 2.5em;
margin: 0 0 0.65em 0;

#banner header p {
font-size: 1.5em;

Now I want to add a picture on the top left of the page that can adapt to screen size changes ( this could sound noob warning) like this :

When I try to simply add a <img> with HTML it eigther goes on the top of the <nav> bar or it sticks to the extreme left of the page.

Now is there a way that I can do this.

Thanks :D

Post a Reply


Oldest  Newest  Rating
0 Zoe Schultz · February 5, 2016
Have you tried putting your image into <div> and apply positioning with float feature in CSS? This might work.
P.S. What is the size of the picture? Maybe it goes sideways, because both the picture and navigation bar do not it in the same container?
0 Nicholas Eason · February 5, 2016
I'd probably change the image's css to

position: absolute;

Usually I'd try to avoid doing this, but since you've already started past the point you're at, you don't want to mess anything up.

Setting a position removes the image from document flow, so it wont mess with anything else

After you set position: absolute, you can set the images position using:

top: value;
bottom: value;
left: value;
right: value;

Note that you don't need to set a left and a right, but a left OR a right (same for top/bottom).

To make the image scale with the page size, set it's width in a %, but set a max-width so it doesn't get too big.


width: 15%;  /*Note this is 15% of the parent container's width*/
max-width: 300px; /*When the image reaches this size, it stops scaling up*/
min-width: 100px; /*I usually test around to see if min-width is needed. It works the opposite of max-width, stops scaling down after the image reaches a certain size*/
  • 1

HTML / CSS / Web Design


Discuss, share, ask, learn and teach HTML5 and CSS3.