Text centred and middle over image - css

Question

I'm trying to redesign a category page on magento to display the category image full width with a max height and have the category title displayed in the same box centred on the image.
I've managed to move the category image and title into the page wrapper with the below code
<move element="category.image" destination="page.wrapper" before="main.content" />
<move element="page.main.title" destination="page.wrapper" before="main.content"/>
The HTML
<div class="amryw-container">
<!-- Lorem Ipsum -->
<div class="page-title-wrapper">
<h1 class="page-title" id="page-title-heading" aria-labelledby="page-title-heading toolbar-amount">
<span class="base" data-ui-id="page-title-wrapper">Classic Wax Melts</span>
</h1>
</div>
<div class="category-image"><img src="https://and-it.co.uk/test-store/pub/media/catalog/category/amryw-classic-wax-melts-banner.jpg" alt="Classic Wax Melts" title="Classic Wax Melts" class="image" /></div>
</div>
The CSS
.amryw-container {
display: contents;
}
.category-image {
margin-bottom: 20px;
align-self: center;
display: contents;
}
.category-image .image {
display: block;
max-width: 100%;
height: 340px;
object-fit: cover;
}
But can't figure out how to get the category title to be in the centre of the image.
Any advice would be greatly appreciated.
Page I'm trying to edit: https://and-it.co.uk/test-store/classic-wax-melts
Page I'm trying to replicate: https://amryw.co.uk/classic-wax-melts/

Answer 1

If the title is a text element, assign text-align:center; to its parent. If the title isn't a text element, you can force an element to behave this way by assigning it display:inline-block;
This is assuming you're using a background-image (which you should)
This might be an easier solution for you: https://jsfiddle.net/8reLz1gk/1/
For more info check out W3: https://www.w3schools.com/css/tryit.asp?filename=trycss_image_text_center2

Answer 2

Well you can set that image as background-image for your div. And then simply display the text in the middle of it.
index.html:
<div class="container">
<p>TEXT HERE</p>
</div>
style.css:
.container {
background-image: url("./img.jpg");
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.container p {
color: rgb(65, 150, 107);
font-size: 32px;
}
like this:

Answer 3

NEW ANSWER:
Well in my html, I put a div around my img, so I could give it a overflow: hidden;. I gave the 'img' and the container around it height :100%. With the overflow: hidden; the image stays within the container. Now I have an image, exactly the same size as my container.\
Now the for the 'p'. It took me some time to come up with this idea:
I first gave my 'p' height: 100%; so it has the same height as the div containing the img and the p tag.
Now I use transform: translateY(-100%);, which is moving up the p tag. Now the p tag and the img are in the same place, occupying the same space (both have same height).
And for centering my 'p', I simply use flex attributes.
index.html
<div class="container">
<div class="img-container">
<img src="./img.jpg" alt="">
</div>
<p>text</p>
</div>
style.css:
.container {
width: 400px;
height: 300px;
}
.container img {
width: 100%;
}
.img-container {
overflow: hidden;
height: 100%;
}
.container p {
height: 100%;
transform: translateY(-100%);
display: flex;
justify-content: center;
align-items: center;
}

Answer 4

Found the answer with the help of another user so posting it for others to use.
Achieved by removing the two basic blocks category.image and page.main.title and creating a custom block.
catalog_category_view.xml
create your PHTML inside your theme \ module : (Note, if you have a custom theme inherited from Luma you can just place it inside: Magento_Catalog\templates\category\view\custom_category_title.phtml,
<referenceContainer name="category.view.container">
<block class="Magento\Catalog\Block\Category\View" name="custom.category.top.view" template="category/view/custom_category_title.phtml"/>
</referenceContainer>
<referenceBlock name="category.image" remove="true"/>
<referenceBlock name="page.main.title" remove="true"/>
instead if you have only a custom module you'll have to place the Layout.xml [catalog_category_view] and the template [custom_category_title] inside your module: Vendor_Module\view\frontend\layout\catalog_category_view.xml and Vendor_Module\view\frontend\templates\category\view\custom_category_title.phtml)
\category\view\custom_category_title.phtml
<?php
/**
* Category view template
*
* #var $block \Magento\Catalog\Block\Category\View
*/
$_currentCat = $block->getCurrentCategory();
$categoryTitle = $_currentCat->getName();
$categoryImage = $_currentCat->getImageUrl();
?>
<div>
<div class="category-image-custom">
<img title="<?=$categoryTitle?>" alt="<?=$categoryTitle?>" src="<?=$categoryImage?>">
<h1><?=$categoryTitle?></h1>
</div>
</div>
And finally, the CSS
.category-image-custom img {
display: block;
width: 100%;
object-fit: cover;
object-position: top;
margin: auto;
height: 300px;
}
.category-image-custom h1 {
position: absolute;
bottom: 50%;
right: 40%;
font-size: 30px;
font: 400 50px/1.2 Poiret One, Helvetica Neue, Verdana, Arial, sans-serif;
color: #fff;
}
.category-image-custom {
margin-bottom: 20px;
width: 100%;
align-self: center;
position: relative;
flex-wrap: wrap;
display: flex;
}
Hope this helps anyone else looking to do the same!