What is the best way to showcase my background image using html and css?

I've come across a similar topic addressing my problem, but I am still unable to resolve it. I am attempting to add a background image to my portfolio, but for some reason, it is not working. Can anyone offer any suggestions or ideas?

Here is the code I'm using:

HTML:

 <div class="main">
    <div class="navbar container-fluid d-flex justify-content-center"> 
        <i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i> 
        <i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
        <i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
    </div>
</div>

CSS:

.main{
background-image: url(../img/dev-dots.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;


}

.navbar{
    height: 10vh;
    background-color: purple;
    position: fixed;
}

PS: Please excuse any mistakes in my English, as it is not my native language.

htmlcssbackground-image

Answer №1

.main{
  background-image: url('http://scontent-vie1-1.xx.fbcdn.net/v/t1.0-0/p640x640/86969955_2219297081712551_4370094468804640768_o.jpg?_nc_cat=108&_nc_ohc=RXVSJ86AsuoAX_l1w_j&_nc_ht=scontent-vie1-1.xx&_nc_tp=6&oh=f79e4654f5cee0a184fa73d9faa0af49&oe=5EFBD055');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 200px;
}

.navbar{
    height: 10vh;
    background-color: purple;
    position: fixed;
    width: 100%;
    padding: 20px;
}
 <div class="main">
    <div class="navbar container-fluid d-flex justify-content-center"> 
        <i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i> 
        <i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
        <i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
    </div>
</div>

This is the solution you have been searching for? The fixed element prevented the container from expanding, resulting in the background not being visible.

Answer №2

Your main div needs to have a height set in order for the background image to display properly.

Here are some options you can try:

1. Set a fixed height for the main element (although this is not recommended):

.main {
  height: 100px
}

2. Add block elements to your navbar so that the main div's height adjusts automatically:

 .navbar {
display: block
}

3. Avoid using position: fixed in this scenario as well.

4. Remove the background color from the navbar, as it may cover up the background image of the main div.

I hope these suggestions help!

Answer №3

.main{
background-image: url('https://cdn.pixabay.com/photo/2020/02/14/04/20/old-city-4847469_960_720.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;


}

.navbar{
    height: 20vh;
     background-color: rgba(0,0,0,0.5);
    position: relative;
    width: 100%; 
    z-index: 999;
    color: #fff;
    padding: 20px;
}
<div class="main">
    <div class="navbar container-fluid d-flex justify-content-center"> 
        <i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i> 
        <i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
        <i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
    </div>
</div>

Answer №4

you have selected the incorrect route. Please consider the following 

<!DOCTYPE HTML>
<html>
<head>
<style>

.main{
background-image: url(http://www.cagbd.org/assets/upload/logo/1124d2b92e3b8f44b1c8f21cfebc6dae.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}

.navbar{
    height: 10vh;
}
</style>
</head>
<body>
    
 <div class="main">
    <div class="navbar container-fluid d-flex justify-content-center"> 
        <i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i> 
        <i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
        <i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
    </div>
</div>



</body>
</html>

Answer №5

.main-container {
  background-image: url(../img/dev-dots.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 200px;
  height: 100px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Javascript in Spotfire for enhanced functionality

Currently, I have a dropdown menu with two options ("START" & "END"). Depending on the selected value from this dropdown, I want to display a specific DIV element. I attempted to use the code below, but unfortunately, it is not functioning as expected ...

javascriptjquerypythonhtmlspotfire

Exploring the integration of Selenium WebDriver with a Polymer website and its Shadow root functionality

When I use Google Chrome console, I can easily click on a Shadow root element using the following code: document.querySelector('html /deep/ next-tab').querySelector('a').click() However, when I tried to do the same thing with web-driv ...

javahtmlselenium

What is the best way to create an HTML template with a table where the first column is divided into four cells and the second column only has one

Currently, I am working on a template using HTML and CSS. One issue that I am facing involves designing a table template with HTML and CSS. The specific problem occurs in the second row of the table where there are 4 cells in the first column and only one ...

javascripthtmljquerycssbootstrap-4

The shade of grey on the curve appears instead of the usual red on the iPad. Any ideas on how to fix

I am having trouble creating a curve like the one shown below on my iPad. The color appears to be gray and does not work properly. Is this a bug with ChartJS or is there a solution to fix this issue? This problem occurs when the type value is set to "lin ...

javascriptcssipadchart.jsvisualization

Traversing a series of HTML form elements in order to extract their current values and store them in an object

Suppose we have an HTML structure like this: <nav data-filters class=""> <input type="radio" name="type" value="company" checked>Company <input type="radio" name="type" value="product">Product <input type=" ...

javascriptjqueryhtmlbackbone.jsunderscore.js

Mastering the art of creating the origami illusion using advanced 3D transformation techniques

I'm looking to create an origami-inspired effect on a div element, but I'm not sure where to start. To help illustrate what I mean, I will be sharing two images of a paper sheet: https://i.sstatic.net/5gRWd.jpg and https://i.sstatic.net/lL9Vd.jpg ...

jqueryhtmlcss

I am experiencing an issue with my Angular directive where the button click does not

Check out this page for guidance on adding a div with a button click in AngularJS: How to add div with a button click in angularJs I attempted to create an angular directive that should add a div to my HTML page when a button is clicked. However, upon cli ...

javascriptjqueryhtmlangularjs

Choose a random cell in Jquery every second

I am searching for a method to choose one div out of sixteen and change its CSS backgrounds. This selection needs to occur every second, so a new div is selected from the group each second. I am struggling with implementing the "every second" functionalit ...

javascriptjqueryhtml

Media Queries seem to be unresponsive on Tablet and Desktop devices

I've been trying to resolve this issue for quite some time now, but I'm still unable to find a solution. My goal is to center the Wufoo Forms visually on different screen sizes using media queries, however, despite rewriting them multiple times a ...

cssmedia-querieswufoo

Variables in an Angular application are not appearing in the HTML rendering

Currently learning AngularJS as I develop a web application. After going through tutorials, I started with a basic list but am baffled as to why my browser only shows {{title}}. In my app.js module, here's the snippet where I defined the controller: ...

javascripthtmldata-bindingangularjs

Integrate a scrollbar seamlessly while maintaining the website's responsiveness

I encountered an issue where I couldn't add a scrollbar while maintaining a responsive page layout. In order to include a scrollbar in my datatables, I found the code snippet: "scrollY": "200px" However, this code sets the table size to 200 pixels r ...

javascriptjqueryhtmlcssdatatables

CSS Switchable Style Feature

I am in need of some assistance with the navigation on my website. You can find the current code at this link: http://jsfiddle.net/Sharon_J/cf2bm0vs/ Currently, when you click on the 'Plus' sign, the submenus under that category are displayed bu ...

javascriptjqueryhtmlcss

Is there a way to ensure a Javascript alert appears just one time and never again?

I struggle with Javascript, but I have a specific task that needs to be completed. I am participating in a school competition and need an alert to appear only once throughout the entire project, not just once per browsing session. The alert will inform ...

javascriptjqueryhtmlcssalert

Creating a bezel design in CSS or Vue: A step-by-step guide

Embedding: https://i.sstatic.net/YfvQP.png Is there a CSS property that can be used to create the same angle as shown in the layout? I looked everywhere in the program but couldn't find this specific property. Tried searching here !: https://i.s ...

javascripthtmlcssvue.jsfigma

WordPress presents a challenge with PHP Heredoc not displaying variables in HTML

I've coded some functions in my theme's functions.php file. Here is an example: $usrProfileHTML = <<<EOD <div class="eUserProfile"> <div class="eUsrImage"> <img src="{$envUserProfile['eUsrImage']}" a ...

phphtmlwordpressheredoc

Tips for setting a default value in a Reactive Form

How can I transfer a default value from HTML to TypeScript using reactive forms? <ul class="list list_2"> <li>Subtotal <span>{{cartTotal | currency:'INR':true:'2.0'}}</span></li> <li>Shippin ...

htmlangularangular8angular-reactive-formsdefault-value

OpenStreetMap is failing to display the full map within the designated div

Here is the code snippet for displaying a map when clicking on a Span text, but not showing it in full: var latitude = document.querySelector('#lati').value; var longitude = document.querySelector('#longi').value; var open_address = doc ...

javascriptphphtmllaravel-blade

What is the best way to superimpose an image onto a canvas?

I am working on a cool project where I have created a canvas that displays matrix binary code raining down. However, I would like to enhance it by adding an image overlay on top of the canvas. Here is my current setup: <div class="rain"> ...

javascripthtmlcss

Tips on adjusting the size of a Materialize CSS datepicker to perfectly fit within a card

Currently, I am developing a login page in html utilizing the materialize css framework. In my design, I created a card where Login and Register are displayed as tabs within the card. However, one of the forms includes a datepicker from materialize which ...

jqueryhtmlcssdatepickermaterialize

How can one append a string of text to the right of each bar? Let's find out!

.chart div { font: 10px sans-serif; background-color: steelblue; text-align: right; padding: 3px; margin: 1px; color: white; } </style> <div class="chart"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5 ...

javascripthtmlcssd3.js