Imagem dentro de BG sem ultrapassar limites.

[Ruan Boaventura 0]

Olá pessoal! Em primeiro lugar boa noite, gostaria de dizer que já tentei de tudo até onde os meus conhecimentos limitados me permitem antes de pedir ajuda. Porém não obtive êxito e por isso estou pedindo a ajuda de vocês, experts. Sou grato desde já por todos que tentarem me ajudar e/ou ajudarem.

Meu problema é o seguinte: Eu tenho uma div chamada "titulo" esta div contém um background e dentro desta div existe uma outra div chamada "titulo-imagem". Que deve conter uma imagem ou um background. Porém, o que me ocorre aqui é o seguinte:

- Ao utilizar uma imagem dentro da div "titulo-imagem" esta imagem não respeita as margens de sua div pai e ultrapassa ela. Sendo que eu gostaria que a mesma ficasse dentro da div pai, ainda assim. Uma imagem explica melhor:

Gostaria que a div "titulo-imagem" permanecesse com a imagem dentro da div "titulo". Sem ultrapassar ela. Para fim de melhorar o entendimento, meu código está assim:

HTML:

<div id="titulo">
	<div id="titulo-content">
			<img src="quem-somos-imagens/titulo-imagem.png" />
	</div>
</div>

CSS:

#titulo {
	background-image:url("quem-somos-imagens/titulo-bg.png");
	background-size:100%;
	background-repeat:no-repeat;
	min-width:975px;
	min-height:164px;
}

#titulo #titulo-content {
	width:975px;
	height:164px;
	margin:0 auto;
	padding-top:3px;
	padding-left:107px;
}

Espero que vocês tenham conseguido me entender, fico no aguardo de uma resposta. Estou precisando muito desta ajuda.
Obrigado desde já!

[reebr 94]

#titulo-content {
   overflow: hidden;
}

Não entendi sua dúvida. O background da div de trás tem que aparecer como background da div frontal (#titulo-content) ?

[Ruan Boaventura 0]

Rnxn, o que acontece é que eu já tentei isso antes. De várias maneiras, continua da mesma forma, sem funcionar. Tem alguma outra solução? Estou desesperado precisando resolver esse meu problema! :(

O background da div de trás, tem que aparecer como background da div de trás justamente. Esta imagem verde, que esta dentro da "#titulo-content" pode ser tanto um background ou imagem, tanto faz. Portanto que ele fique por cima do background da "titulo" e que ele fique dentro, e não assim ultrapassando os limites. Conseguiu entender agora?

Eu quero assim, porém está ficando como mostrei na 1ª imagem do post. :(

[jgustavo99 85]

Olá Ruan! Tente usar a propriedade position:relative na sua DIV TItulo-Content.

 

Espero ter Ajudado ;)

[Ruan Boaventura 0]

Opa JGustavo99. Agradeço por tentar me ajudar cara, mas infelizmente não obtive êxito ainda não.

- Vou tentar explicar o meu problema de maneira melhor. Eu tenho este banner:

E preciso colocar esta imagem, dentro do banner:

De maneira que ela NÃO fique assim, que é como está ficando:

Mas que fique assim:

Espero que vocês tenham me entendido melhor. Exemplifiquei como está o meu código no meu 1º post. Sintam-se livre para alterá-lo, portanto que eu consiga manter a "linha verde/background verde" dentro desta imagem das cidades, seria ótimo.

Fico no aguardo de alguma solução ainda...

[IagoEduardo 1]

Amigo, já passei por algo parecido a alguns anos atrás...

Mas no fim das contas, acabei desenvolvendo em Flash.

 

Não sei se no seu caso daria certo.

Estou curioso também, espero que ajudem-no!

[Marlon Pacheco 132]

Que tal isso?

img {
  max-width: 100%;
}

[reebr 94]

Você pode criar um bloco com o pseudo elemento ::after nesse id "#titulo" na cor do fundo da página.

Depois você usa a propriedade transform para deixá-lo na diagonal.

 

Mas isso não fará com que o que for criado dentro de "#titulo-content" se ajuste magicamente.