0

I want to insert an image by CSS because I want to use captions over my image.

What I want is that the image shows completely and is responsive.

Can anyone help me with this?

Here you can see my HTML im using bootstrap. As you can see i want to let contentblock1 show an responsive image by using the CSS background-image code. I also want this background image to be responsive. But whatever i try it won't show me the background.

<div class="container">
        <div class="col-sm-6">
            <h1> Dit is een bootstrap site</h1>
            <button type="button">click me!</button>
        </div>
        <div class="col-sm-6">
            <div class="contentblock1">

            </div>
        </div>

I'm using the following CSS 

.contentblock1 {
background-image: url('http://1.bp.blogspot.com/_zxdOSKs0ASI/TDMqbnatRwI/AAAAAAAAAkM/nB-DxcVcqqk/s1600/Testbeeld.jpg');
background-size: 100% 100%;
width: 100%;
}
Jeroen Wallbrink
  • 71
  • 1
  • 1
  • 10

2 Answers2

0
width: 100px; /*you width*/
height: 100px; /*you height*/
/* optional: background-color: white; */
background-image: url('image.png');
background-repeat: none;
background-size: 100% 100%;
/*or
background-size: cover;
background-position: 50% 50%;*/
background-attachment: fixed;
alessandrio
  • 4,282
  • 2
  • 29
  • 40
  • Hi I tried ur code. But my image does not appear then. .contentblock1 { background-image: url('http://freewallpaperspot.com/wallpapers/1024-768-3.jpg'); background-size: cover; background-position: 50% 50%; background-attachment: fixed; } this is the code im using. – Jeroen Wallbrink Aug 30 '14 at 21:39
  • Changed the code with correct link. still not working. .contentblock1 { background-image: url('http://1.bp.blogspot.com/_zxdOSKs0ASI/TDMqbnatRwI/AAAAAAAAAkM/nB-DxcVcqqk/s1600/Testbeeld.jpg'); background-size: cover; background-position: 50% 50%; background-attachment: fixed; } – Jeroen Wallbrink Aug 30 '14 at 21:43
  • `.contentblock1 { width: 100px; height: 100px; background-image: url('http://freewallpaperspot.com/wallpapers/1024-768-3.jpg'); background-size: cover; background-position: 50% 50%; background-attachment: fixed; }` missing size – alessandrio Aug 30 '14 at 21:45
  • The image does still not appear. I just want to insert an image by using the CSS image-background and that it is responsive. When i make
    tags in my html then its beginning to show the image. But that aint right i think...     – Jeroen Wallbrink Aug 30 '14 at 21:51
  • remove `background-size: cover;background-position: 50% 50%;background-attachment: fixed;` and add `background-size: 100% 100%;` – alessandrio Aug 30 '14 at 21:55
  • Is the image not showing because i dont got any text or content in it? i tried ur code still it is not working. But thanks for trying to help me. – Jeroen Wallbrink Aug 30 '14 at 21:57
  • argues more about what you want to do **Edit your question** and use code – alessandrio Aug 30 '14 at 21:59
  • I changed my post for you. If you could take a look at it. Appreciate it. – Jeroen Wallbrink Aug 30 '14 at 22:09
0
#some-div {
   background-image: <imgurl>;
   background-repeat: none; //Unless you want something else
   backgorund-size: 100% 100%;
}

and for responsiveness, use media-queries or a lib that is made for responsiveness such as Bootstrap.

Below you have an example of media-queries.

@media (min-width: 1200px) 
{
   #some-div {
       width: 600px;
   }
}

@media (max-width: 768px) 
{

   #some-div {
       width: 100%;
   }
}

EDIT: http://jsfiddle.net/e8xLf4u3/

Here is your working example, it only needed content. Also, in the future please show some code for faster help and better understanding

Graag gedaan ;)

Jeffrey Wong
  • 41
  • 1
  • 4