[Skip to main content](#vessel-content) # CSS for text overlay on category layout ## - **[huwhuw](/forum/user/35272-huwhuw "View huwhuw's Profile")** - [![huwhuw's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar35272.jpg)](/forum/user/35272-huwhuw "View huwhuw's Profile") Topic Author - [ Offline](/forum/user/35272-huwhuw) Less More - Posts: 84 - Thank you received: 9 - - 11 years 8 months ago [\#188330](#188330) by [huwhuw](/forum/user/35272-huwhuw "View huwhuw's Profile") *[CSS for text overlay on category layout](/forum/26-product-category-display/874549-css-for-text-overlay-on-category-layout#188330 "-- url of the page with the problem -- : 109.73.160.162/~cremur/index.php?option=...t=listing&Itemid=255 -- HikaShop version -- : 2.3.5 -- Joomla version -- : 3.3.6 Hi I am trying to achieve this look with category layout gyazo.com/0191509f2c06f540ce2faf9307dabb1a I have modified the css .hikashop_category_name { color: #555; font-weight: bold; font-size: 14px; background: black; display: block; margin-bottom: 160px; margin-top: -200px; } The 'Category Text" overlays the image ok but the black background is behind the image? I can't work out how to bring the black background above the Category image - see attachment Any help really appreciated")* was created by *[huwhuw](/forum/user/35272-huwhuw "View huwhuw's Profile")* -- url of the page with the problem -- : [ 109.73.160.162/~cremur/index.php?option=...t=listing&Itemid=255](http://109.73.160.162/~cremur/index.php?option=com_hikashop&view=category&layout=listing&Itemid=255) -- HikaShop version -- : 2.3.5 -- Joomla version -- : 3.3.6 Hi I am trying to achieve this look with category layout [ gyazo.com/0191509f2c06f540ce2faf9307dabb1a](http://gyazo.com/0191509f2c06f540ce2faf9307dabb1a) I have modified the css .hikashop_category_name { color: #555; font-weight: bold; font-size: 14px; background: black; display: block; margin-bottom: 160px; margin-top: -200px; } The 'Category Text" overlays the image ok but the black background is behind the image? I can't work out how to bring the black background above the Category image - see attachment Any help really appreciated - [ ![Screen_shot_2015-01-27_at_10_09_11.png](/forum/attachment/21947) ](/forum/attachment/21947 "...t_10_09_11.png") [ ](/forum/attachment/21947?download=1 "...t_10_09_11.png") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzQ1NDktY3NzLWZvci10ZXh0LW92ZXJsYXktb24tY2F0ZWdvcnktbGF5b3V0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Xavier](/forum/user/4105-xavier "View Xavier's Profile")** - [![Xavier's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4105.png)](/forum/user/4105-xavier "View Xavier's Profile") - [ Offline](/forum/user/4105-xavier) Less More - Posts: 13201 - Thank you received: 2322 - - - - [](http://www.kidiweb.fr) - 11 years 8 months ago [\#188336](#188336) by [Xavier](/forum/user/4105-xavier "View Xavier's Profile") Replied by *[Xavier](/forum/user/4105-xavier "View Xavier's Profile")* on topic *[CSS for text overlay on category layout](/forum/26-product-category-display/874549-css-for-text-overlay-on-category-layout#188336 "-- url of the page with the problem -- : 109.73.160.162/~cremur/index.php?option=...t=listing&Itemid=255 -- HikaShop version -- : 2.3.5 -- Joomla version -- : 3.3.6 Hi I am trying to achieve this look with category layout gyazo.com/0191509f2c06f540ce2faf9307dabb1a I have modified the css .hikashop_category_name { color: #555; font-weight: bold; font-size: 14px; background: black; display: block; margin-bottom: 160px; margin-top: -200px; } The 'Category Text" overlays the image ok but the black background is behind the image? I can't work out how to bring the black background above the Category image - see attachment Any help really appreciated")* Hi, You potentially have to play with the z-index css property. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzQ1NDktY3NzLWZvci10ZXh0LW92ZXJsYXktb24tY2F0ZWdvcnktbGF5b3V0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[huwhuw](/forum/user/35272-huwhuw "View huwhuw's Profile")** - [![huwhuw's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar35272.jpg)](/forum/user/35272-huwhuw "View huwhuw's Profile") Topic Author - [ Offline](/forum/user/35272-huwhuw) Less More - Posts: 84 - Thank you received: 9 - - 11 years 8 months ago - 11 years 8 months ago [\#188446](#188446) by [huwhuw](/forum/user/35272-huwhuw "View huwhuw's Profile") Replied by *[huwhuw](/forum/user/35272-huwhuw "View huwhuw's Profile")* on topic *[CSS for text overlay on category layout](/forum/26-product-category-display/874549-css-for-text-overlay-on-category-layout#188446 "-- url of the page with the problem -- : 109.73.160.162/~cremur/index.php?option=...t=listing&Itemid=255 -- HikaShop version -- : 2.3.5 -- Joomla version -- : 3.3.6 Hi I am trying to achieve this look with category layout gyazo.com/0191509f2c06f540ce2faf9307dabb1a I have modified the css .hikashop_category_name { color: #555; font-weight: bold; font-size: 14px; background: black; display: block; margin-bottom: 160px; margin-top: -200px; } The 'Category Text" overlays the image ok but the black background is behind the image? I can't work out how to bring the black background above the Category image - see attachment Any help really appreciated")* Yes i tried Z-index before but it doesnt have any effect. The solution is to add a position: relative; rule this brings the black background forward and therefore solves my issue: hikashop_category_name { color: #555; font-weight: bold; font-size: 14px; background: black; display: block; margin-bottom: 160px; margin-top: -200px; position:relative; } Last edit: 11 years 8 months ago by [huwhuw](/forum/user/35272-huwhuw "View huwhuw's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzQ1NDktY3NzLWZvci10ZXh0LW92ZXJsYXktb24tY2F0ZWdvcnktbGF5b3V0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[jomytago](/forum/user/37331-jomytago "View jomytago's Profile")** - [![jomytago's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/37331-jomytago "View jomytago's Profile") - [ Offline](/forum/user/37331-jomytago) Less More - Posts: 2 - Thank you received: 0 - - 11 years 5 months ago [\#202253](#202253) by [jomytago](/forum/user/37331-jomytago "View jomytago's Profile") Replied by *[jomytago](/forum/user/37331-jomytago "View jomytago's Profile")* on topic *[CSS for text overlay on category layout](/forum/26-product-category-display/874549-css-for-text-overlay-on-category-layout#202253 "-- url of the page with the problem -- : 109.73.160.162/~cremur/index.php?option=...t=listing&Itemid=255 -- HikaShop version -- : 2.3.5 -- Joomla version -- : 3.3.6 Hi I am trying to achieve this look with category layout gyazo.com/0191509f2c06f540ce2faf9307dabb1a I have modified the css .hikashop_category_name { color: #555; font-weight: bold; font-size: 14px; background: black; display: block; margin-bottom: 160px; margin-top: -200px; } The 'Category Text" overlays the image ok but the black background is behind the image? I can't work out how to bring the black background above the Category image - see attachment Any help really appreciated")* More examples on......[ Text Overlay](http://www.corelangs.com/css/box/caption.html) Jomy Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzQ1NDktY3NzLWZvci10ZXh0LW92ZXJsYXktb24tY2F0ZWdvcnktbGF5b3V0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.309 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)