the text must be inside of the image,which is not?

  • Resolved johannes999

    (@johannes999)


    1 year, 1 month ago

    Hello,

    this is html code:

    
		<div class="onderhoud-page-image-container">
  <img src="https://webdesignmaster.eu/wp-content/uploads/2023/09/apk-in-rotterdam-1.webp" alt="Auto onderhoud">
  <div class="image-text-onderhoud-page">Auto Onderhoud</div>
</div>

    and this is css : 

    	.onderhoud-page-image-container {
  position: relative;
	 display: inline-block;
  width: 100%;
   margin: 0 auto; /* Center the container horizontally */
}

.onderhoud-page-image-container img {
   max-width: 100%;
  width: 1560px; 
   display: block;
	max-height:750px;
	height:100%;    
  object-fit: cover;
  object-position: center;
}
	.



.image-text-onderhoud-page {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px;
  font-size: 16px;
  font-weight: bold;
}

    I want the text to be inside of the image but it is still ouside of the image under the image on the left side ouside .

    can someone tell me what I am doing wrong or can fix this code?

    I had the same problem long ago but I have removed that theme on that time which I had to keep it.

    thanks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    The .image-text-onderhoud-page CSS you posted appears to be correct, but it’s not being applied. Maybe there’s a syntax error above that point in the file preventing it from being correctly parsed?

    Where did you place this CSS? I looked in style.css and saw the related image styles, but nothing for .image-text-onderhoud-page.

    Thread Starter johannes999

    (@johannes999)

    thanks,

    it was in style1.css . I have set the code in extra css section of wordpress and it worked .

    I don’t undesrtand why it is not worked in style1.css a lot of code is in stye1.css are functioning perfectly.

    thanks again

    Moderator bcworkz

    (@bcworkz)

    There is some other CSS in your Additional CSS section that would override any equivalent rules in either style.css or style1.css.

    If the style1.css rules are not working despite there being no overrides in Additional CSS, then it’s possible there’s a syntax error in the file which prevents the file from being properly parsed. Corroborating evidence would be if all CSS after a certain point in the file is failing to be applied.

    There are various CSS code checkers or “linters” that will help you find any syntax errors. One example: https://csslint.net/ (I’ve never used it myself, it’s just an example)

    Thread Starter johannes999

    (@johannes999)

    thanks ,

    I wil check it tomorrow. now is above 10 clock evening.

    thanks again

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘the text must be inside of the image,which is not?’ is closed to new replies.

Tags