{"id":98486,"date":"2024-08-08T09:00:00","date_gmt":"2024-08-08T13:00:00","guid":{"rendered":"https:\/\/www.crazyegg.com\/blog\/?p=98486"},"modified":"2026-01-06T15:13:12","modified_gmt":"2026-01-06T23:13:12","slug":"hero-image-css","status":"publish","type":"post","link":"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/","title":{"rendered":"How to Add a Hero Image With CSS"},"content":{"rendered":"\n<p>A hero image is the most noticeable visual element that sits above the fold of a site\u2019s page. It usually takes up more than half the screen and serves as a signal to showcase a product, summarize an article, or demonstrate the benefits of an upcoming sale.<\/p>\n\n\n\n<p>In addition to adding a hero image with a website builder, you can also add one with the help of HTML and CSS. In this article, we\u2019ll focus on adding a hero image with CSS over HTML.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">When to Use CSS For Hero Images Instead of HTML<\/h2>\n\n\n\n<p>HTML, or Hypertext Markup Language, is a type of web language that defines the structure of a website. CSS, an abbreviation that stands for Cascading Style Sheet, adds design improvements and flair to the existing HTML structure.<\/p>\n\n\n\n<p>Both ways of adding a hero image often overlap. However, they also have their particular use cases as well. For example, if your hero image provides additional context to your content, it\u2019s better to add it using HTML.<\/p>\n\n\n\n<p>Alternatively, a hero image that is purely there for a decorative purpose would be better served with CSS.<\/p>\n\n\n\n<p>Here\u2019s a quick rule of thumb to determine your preferred method:<strong> If you remove the hero image from your content, will the remaining content still make sense? If the answer is NO, use HTML. If it\u2019s YES\u2014proceed with CSS.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Hero Images with CSS<\/h2>\n\n\n\n<p>It\u2019s important to note that a CSS file doesn\u2019t do anything on its own. A file that ends with the &#8220;.css&#8221; extension must be connected to an &#8220;.html&#8221; file to work. Furthermore, HTML and CSS use different syntaxes to define the same things and achieve the same outcome.<\/p>\n\n\n\n<p>In HTML, adding a hero image can be achieved with the <strong>&lt;img&gt;<\/strong> tag:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"hero-image.png\" alt=\"Alternative text\" width=\"800\" height=\"500\"&gt;<\/code><\/pre>\n\n\n\n<p>In CSS, you have to use the <strong>background-image<\/strong> property and move the width and height attributes down in a new line:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img {\n    background-image: url(\"hero-image.png\");\n    background-color: #cccccc;\n    width: 800px;\n    height: 500px;\n}<\/code><\/pre>\n\n\n\n<p>The <strong>background-color<\/strong> property prints a color of your choosing whenever the hero image is unable to load.<\/p>\n\n\n\n<p>Additionally, you can add different background properties to style, move, and resize your hero image:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img {\n    background-image: url(\"hero-image.png\");\n    background-color: #cccccc;\n    width: 800px;\n    height: 500px;\n    background-position: bottom 100px right 150px;\n    background-repeat: repeat-x;\n    background-size: 50%;\n}<\/code><\/pre>\n\n\n\n<p>The <strong>background-position<\/strong> property moves the hero image 100 pixels down and 150 pixels to the right, the <strong>background-repeat<\/strong> property repeats the hero image along the x-axis, and the <strong>background-size<\/strong> CSS property resizes the hero image down to 50% from its original size.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tricks and Snags when Using CSS With Hero Images<\/h2>\n\n\n\n<p>Hero images are the first things visitors see when accessing a page on your website. A carefully integrated hero image can improve the user experience (UX), reduce your bounce rate, and encourage leads to purchase your product or subscribe to your service.<\/p>\n\n\n\n<p>On the contrary, a badly optimized hero image may negatively impact your brand\u2019s credibility and reputation, leading to a decrease in revenue and organic traffic.<\/p>\n\n\n\n<p>To avoid that, here are some of the best tricks, tips, and snags on adding and optimizing hero images with CSS code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Add zoom on hover for a dynamic effect<\/h3>\n\n\n\n<p>Sometimes, a static hero image just isn\u2019t going to cut it. You can change this by adding an additional level of dynamism with the zoom effect on mouse hover. This type of effect is best used when you want to emphasize your hero image and make it take center stage in an upcoming sale or discount marketing campaign, or when you\u2019re ready to launch a new product.<\/p>\n\n\n\n<p>The CSS code is very straightforward. Simply use the transform property to achieve this effect:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img:hover {\n    transform: scale(1.3);\n}<\/code><\/pre>\n\n\n\n<p>With this shortcode, your hero image will zoom in whenever the user hovers with their mouse cursor over it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Use image masking for stylization and flair<\/h3>\n\n\n\n<p>If you want to show certain parts of your hero image without permanently altering your original file\u2014use mask-image. The <strong>mask-image<\/strong> property allows you to define a shape and apply it to your hero image. Any part of the image that ends up outside of the mask is hidden, while the rest of the hero image is displayed according to the shape of the mask.<\/p>\n\n\n\n<p>Image masking uses a scale that ranges from black to transparent. Anything defined as 100% black inside the mask will be completely visible, anything defined as 100% transparent will be completely hidden, and the parts defined as any value between black and transparent will be partially masked according to your predefined value.<\/p>\n\n\n\n<p>Additionally, image masking can be achieved in three main ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Masking with a linear gradient<\/li>\n\n\n\n<li>Masking with a radial gradient<\/li>\n\n\n\n<li>Masking with an image shape<\/li>\n<\/ul>\n\n\n\n<p>Here\u2019s an example of image masking using linear gradient:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#masking {\n    -webkit-mask-image: linear-gradient(to top, transparent 10%, black 70%);\n    mask-image: linear-gradient(to top, transparent 10%, black 70%);\n}<\/code><\/pre>\n\n\n\n<p>A radial gradient image masking will look something like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#masking {\n    -webkit-mask-image: radial-gradient(circle 25% 85% at 30% 60%, black 40%, transparent 60%);\n    mask-image: radial-gradient(circle 25% 85% at 30% 60%, black 40%, transparent 60%);\n }<\/code><\/pre>\n\n\n\n<p>Masking with images works by taking the shape of a different image and applying it to your original hero image. Here\u2019s an example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#masking {\n    -webkit-mask-image: url(masking-image.jpeg);\nmask-image: url(hero-image.jpeg);\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. Add filters to make your hero image pop<\/h3>\n\n\n\n<p>Adding a filter in CSS is a quick and simple way to make your hero image more vibrant and eye-popping without introducing permanent changes to your source file.<\/p>\n\n\n\n<p>Let\u2019s say you want to use 5 effects interchangeably: blur, huerotate, saturate, sepia, and grayscale. To do this, first, you need to define a class for each effect:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body>\n\n&lt;img src=\"hero-image.png\" alt=\"Hero image\" width=\"500\" height=\"500\">\n&lt;img class=\"blur\" src=\"hero-image.png\" alt=\"Hero image\" width=\"500\" height=\"500\">\n&lt;img class=\"huerotate\" src=\"hero-image.png\" alt=\"Hero image\" width=\"500\" height=\"500\">\n&lt;img class=\"saturate\" src=\"hero-image.png\" alt=\"Hero image\" width=\"500\" height=\"500\">\n&lt;img class=\"sepia\" src=\"hero-image.png\" alt=\"Hero image\" width=\"500\" height=\"500\">\n&lt;img class=\"grayscale\" src=\"hero-image.png\" alt=\"Hero image\" width=\"500\" height=\"500\">\n\n&lt;\/body><\/code><\/pre>\n\n\n\n<p>Then, you need to call each effect by class with the dot (.) selector and choose your values for the effects:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.blur {filter: blur(3px);}\n.huerotate {filter: hue-rotate(120deg);}\n.saturate {filter: saturate(5);}\n.sepia {filter: sepia(85%);}\n.grayscale {filter: grayscale(80%);}<\/code><\/pre>\n\n\n\n<p>Lastly, you can use the symbols \/* *\/ to comment out the effects you don\u2019t like to render on the front end, without deleting the code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.blur {filter: blur(3px);}\n\n\/*\n.huerotate {filter: hue-rotate(120deg);}\n.saturate {filter: saturate(5);}\n.sepia {filter: sepia(85%);}\n.grayscale {filter: grayscale(80%);}\n*\/<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">4. Create a ghost button for a stylish CTA<\/h3>\n\n\n\n<p>A &#8220;ghost button&#8221; is a web design element that consists of two parts: a transparent background and a solid border with text in the center of the button. Popular sites often use it for aesthetic purposes and to demonstrate their willingness to innovate to future visitors.<\/p>\n\n\n\n<p>Ghost buttons look great on top of hero images. They draw the user\u2019s attention to the CTA and allow them to see through the hero image without compromising the other web elements on the page.<\/p>\n\n\n\n<p>To create a ghost button, first, you need to define an &lt;a&gt; element in HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a class=\"ghost-button\" href=\"example-link.com\"&gt;Click here!&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Here\u2019s how to create a full-color fade on hover with CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.ghost-button {\n    display: inline-block;\n    width: 400px;\n    padding: 5px;\n    color: #fff;\n    background-color: transparent;\n    border: 3px solid #fff;\n    text-align: center;\n    outline: none;\n    text-decoration: none;\n    transition: color 0.1s ease-out, background-color 0.1s ease-out, border-color 0.1s ease-out;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>.ghost-button:hover, .ghost-button:active {\n    background-color: #FFFF00;\n    border-color: #FFFF00;\n    color: #fff;\n    transition: color 0.1s ease-in, background-color 0.1s ease-in, border-color 0.1s ease-in; \n}<\/code><\/pre>\n\n\n\n<p>The ghost button will fade to an opaque yellow color whenever the user hovers over it with their mouse cursor. Otherwise, it will show the hero image within the button\u2019s solid white frame.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Use shape-outside to wrap text around your hero image<\/h3>\n\n\n\n<p>The <strong>shape-outside<\/strong> CSS property allows you to change the way text wraps around your hero image and escape the monotony of rectangular shapes. It\u2019s a great approach if you want to funnel your audience\u2019s attention toward a particular spot on your page, like a text link, a prominent statistic, or a CTA button.<\/p>\n\n\n\n<p>In CSS syntax, inline content wraps around an image\u2019s margin box by default. With the <strong>shape-outside<\/strong> property, you can change this margin box from a rectangle to a circle, ellipse, inset, or polygon.<\/p>\n\n\n\n<p>For example, the following CSS shortcode will change the margin box around your hero image to an ellipse and wrap your text around it according to your parameters:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>hero-img {\nshape-outside: ellipse(150px 200px at 15% 30%) border-box;\n}<\/code><\/pre>\n\n\n\n<p>The <strong>border-box<\/strong> value defines the shape according to the outside edge of the border.<br>You can also use the <strong>margin-box<\/strong>, <strong>content-box<\/strong>, and <strong>padding-box<\/strong> values to change the way how text wraps around your hero image in order to draw more eyeballs to a specific area in your content.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A hero image is the most noticeable visual element that sits above the fold of a site\u2019s page. It usually takes up more than half&#8230;<\/p>\n","protected":false},"author":279,"featured_media":98435,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_lmt_disableupdate":"","_lmt_disable":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[876],"tags":[],"class_list":["post-98486","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Add a Hero Image With CSS<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add a Hero Image With CSS\" \/>\n<meta property=\"og:description\" content=\"A hero image is the most noticeable visual element that sits above the fold of a site\u2019s page. It usually takes up more than half...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/\" \/>\n<meta property=\"og:site_name\" content=\"The Daily Egg\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crazyegganalytics\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-08T13:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-06T23:13:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/07\/29155815\/Herman-Miller-Hero-Image-Example.png\" \/>\n\t<meta property=\"og:image:width\" content=\"675\" \/>\n\t<meta property=\"og:image:height\" content=\"322\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Hiten Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hnshah\" \/>\n<meta name=\"twitter:site\" content=\"@CrazyEgg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hiten Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-css\\\/\"},\"author\":{\"name\":\"Hiten Shah\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/c1969663812802521ba57624887e9df6\"},\"headline\":\"How to Add a Hero Image With CSS\",\"datePublished\":\"2024-08-08T13:00:00+00:00\",\"dateModified\":\"2026-01-06T23:13:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-css\\\/\"},\"wordCount\":1239,\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/29155815\\\/Herman-Miller-Hero-Image-Example.png\",\"articleSection\":[\"Website\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-css\\\/\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-css\\\/\",\"name\":\"How to Add a Hero Image With CSS\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/29155815\\\/Herman-Miller-Hero-Image-Example.png\",\"datePublished\":\"2024-08-08T13:00:00+00:00\",\"dateModified\":\"2026-01-06T23:13:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/29155815\\\/Herman-Miller-Hero-Image-Example.png\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/29155815\\\/Herman-Miller-Hero-Image-Example.png\",\"width\":675,\"height\":322},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/category\\\/website\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add a Hero Image With CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"name\":\"The Daily Egg\",\"description\":\"Conversion Rate Optimization Made Easy\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\",\"name\":\"Crazy Egg\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"width\":191,\"height\":100,\"caption\":\"Crazy Egg\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/crazyegganalytics\\\/\",\"https:\\\/\\\/x.com\\\/CrazyEgg\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/crazy-egg\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCJNe_xmPi07YezxaqfoRVqg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/c1969663812802521ba57624887e9df6\",\"name\":\"Hiten Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g\",\"caption\":\"Hiten Shah\"},\"description\":\"As co-founder and CEO, I have started multiple software-as-a-service (SaaS) companies since 2003 including Crazy Egg, KISSmetrics, and Nira. Sold my last startup (Nira) to Dropbox in 2024 and got my first ever job with a boss. I most recently worked on Product &amp; Growth for the AI Products @ Dropbox. I\u2019m now the CEO of Crazy Egg. Connect with me on LinkedIn or X\\\/Twitter.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/hnshah\\\/\",\"https:\\\/\\\/x.com\\\/hnshah\"],\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/author\\\/hiten\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add a Hero Image With CSS","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/","og_locale":"en_US","og_type":"article","og_title":"How to Add a Hero Image With CSS","og_description":"A hero image is the most noticeable visual element that sits above the fold of a site\u2019s page. It usually takes up more than half...","og_url":"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/","og_site_name":"The Daily Egg","article_publisher":"https:\/\/www.facebook.com\/crazyegganalytics\/","article_published_time":"2024-08-08T13:00:00+00:00","article_modified_time":"2026-01-06T23:13:12+00:00","og_image":[{"width":675,"height":322,"url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/07\/29155815\/Herman-Miller-Hero-Image-Example.png","type":"image\/png"}],"author":"Hiten Shah","twitter_card":"summary_large_image","twitter_creator":"@hnshah","twitter_site":"@CrazyEgg","twitter_misc":{"Written by":"Hiten Shah","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/#article","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/"},"author":{"name":"Hiten Shah","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/c1969663812802521ba57624887e9df6"},"headline":"How to Add a Hero Image With CSS","datePublished":"2024-08-08T13:00:00+00:00","dateModified":"2026-01-06T23:13:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/"},"wordCount":1239,"publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/07\/29155815\/Herman-Miller-Hero-Image-Example.png","articleSection":["Website"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/","url":"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/","name":"How to Add a Hero Image With CSS","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/#primaryimage"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/07\/29155815\/Herman-Miller-Hero-Image-Example.png","datePublished":"2024-08-08T13:00:00+00:00","dateModified":"2026-01-06T23:13:12+00:00","breadcrumb":{"@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.crazyegg.com\/blog\/hero-image-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/#primaryimage","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/07\/29155815\/Herman-Miller-Hero-Image-Example.png","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/07\/29155815\/Herman-Miller-Hero-Image-Example.png","width":675,"height":322},{"@type":"BreadcrumbList","@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.crazyegg.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Website","item":"https:\/\/www.crazyegg.com\/blog\/category\/website\/"},{"@type":"ListItem","position":3,"name":"How to Add a Hero Image With CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.crazyegg.com\/blog\/#website","url":"https:\/\/www.crazyegg.com\/blog\/","name":"The Daily Egg","description":"Conversion Rate Optimization Made Easy","publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.crazyegg.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.crazyegg.com\/blog\/#organization","name":"Crazy Egg","url":"https:\/\/www.crazyegg.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","width":191,"height":100,"caption":"Crazy Egg"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/crazyegganalytics\/","https:\/\/x.com\/CrazyEgg","https:\/\/www.linkedin.com\/company\/crazy-egg\/","https:\/\/www.youtube.com\/channel\/UCJNe_xmPi07YezxaqfoRVqg"]},{"@type":"Person","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/c1969663812802521ba57624887e9df6","name":"Hiten Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g","caption":"Hiten Shah"},"description":"As co-founder and CEO, I have started multiple software-as-a-service (SaaS) companies since 2003 including Crazy Egg, KISSmetrics, and Nira. Sold my last startup (Nira) to Dropbox in 2024 and got my first ever job with a boss. I most recently worked on Product &amp; Growth for the AI Products @ Dropbox. I\u2019m now the CEO of Crazy Egg. Connect with me on LinkedIn or X\/Twitter.","sameAs":["https:\/\/www.linkedin.com\/in\/hnshah\/","https:\/\/x.com\/hnshah"],"url":"https:\/\/www.crazyegg.com\/blog\/author\/hiten\/"}]}},"modified_by":"Lars Lofgren","_links":{"self":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/98486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/users\/279"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/comments?post=98486"}],"version-history":[{"count":0,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/98486\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media\/98435"}],"wp:attachment":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media?parent=98486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/categories?post=98486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/tags?post=98486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}