How do I get an image to cross the boundaries of a DIV

Asked

Viewed 666 times

0

I’m having difficulty putting a 100% image on the mobile screen, which has a margin on the previous DIV, I’ve tried to change the position, overflow and float but I can’t get past this margin. follows an example

.teste{
	margin: 20px auto;
	width: 1000px;
	height: 300px;
	background-color: blue;
	text-align: center;
}
.teste1{
	background-color: red;
	text-align: center;
	width: 1200px;
	height: 200px;
}
<!DOCTYPE html>
<html>
<head>
	<title>teste</title>
	<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
	<div class="teste">
		<div class="teste1">
			
		</div>
		<div class="teste2">
			
		</div>
	</div>
</body>
</html>

in case it would exceed the div in red over the margin used in the blue div.

css positioning

  • Where would the image be?

4 answers

1

Giancarlo, it’s all right?

There are some ways you can implement this. One of the easiest I believe to solve your problem is to use two css properties: margin and z-index; With the margin you can put your div starting on top of each other and the z-index defines which one is ahead and which one is behind.

.teste1 {
 z-index: 2;
 background: red;
 position: relative;
 opacity: 0.8; /* Define uma opacidade para o elemento sobreposto*/
}

.teste2 {
 z-index: 1;
 background: blue;
 margin-top: -10px;
 position: relative;
}

In this way it is possible to define the beginning of the div within the red div, but make it be behind. However, the effect will be similar to what you already have. To give an overlay or transition effect, you can use the opacity of the div, making a transition between blue and red.

0

You can do something like this in css:

.teste{
  margin: 100px;
  width: 200px;
  height: 200px;
  background-color: red;
}

@media (max-width: 600px){
  .teste{
    margin: 0px;
    /*Aqui é onde vc vai tirar a margem do campo que precisa*/
  }
}
<div class="teste"></div>

0

In this case, use in your CSS:

.teste1{
    /* Display inline block trava a imagem na tela */
    display: inline-block;
    background-color: red;
    text-align: center;
    width: 1200px;
    height: 200px;
}

0

I would do a different way, create a div called . container and for this would put a margin of 20px auto. This way you can extend the image over the entire width and when you want the element to have the margin of 20px you can encapsulate it with the div .container. Example

<div id="main">
   <div id="imagem">
      <img src="nome.png" />
   </div>
   <div id="texto">
      <div class="container">
         Texto
      </div>
   </div>
</div>

<style>
   #main{width:100%;}
   #imagem img {width:100%}
   .container{margin: 20px auto;}
</style>

Browser other questions tagged css positioning

You are not signed in. Login or sign up in order to post.