The div is blocking the background image from displaying beneath it

Currently, a work in progress, the banner on this page displays the following structure:

<div id="top">
     <div class="sidebox">
       <div class="boxhead">
         <h2>Chalets des Bouleaux</h2>
       </div>
       <div class="boxbody">
         <p>Tel. 819-444-4444</p>
         <p>Notre-Dame de Pontmain, Québec, Canada</p>
       </div>
     </div>
   </div>

The logo displayed in the center of the banner is built using the div with class sidebox and all its child elements. The photo visible behind the banner serves as the background image for the top div. I would like the logo to give an illusion of floating on top of the photo, making the white parts of the logo transparent so that the photo shows through. However, currently this effect is not achieved despite setting transparent background colors for the logo components.

Update:

I have removed the link to the updated page to avoid any confusion. Please disregard this question and consider closing it!

htmlcss

Answer №1

Your GIFs have a white background that needs to be made transparent!

Answer №2

 <div id="top" style="background-image:url(backgroundimagepath)">
  <div class="sidebox" style="background-color: rgba(255, 255, 255, 0.7);">
    <div class="boxhead">
      <h2>Mountain View Chalets</h2>
    </div>
    <div class="boxbody">
      <p>Tel. 819-555-5555</p>
      <p>Ski Village, British Columbia, Canada</p>
    </div>
  </div>
</div>

Make the following changes and ensure that the sidebox has a transparent background.

Answer №3

To achieve a seamless look, it is essential to swap out the images in the sidebox for ones with transparent backgrounds.

Specifically, the following images need to be replaced:

images/sbbody-r.gif
images/sbhead-r.gif
images/sbbody-l.gif
images/sbhead-r.gif

Answer №4

To recreate the following images, convert them to 24-bit PNG's with semi-transparent backgrounds:

  • sbhead-l.gif
  • sbbody-l.gif
  • sbbody-r.gif
  • sbhead-r.gif

If you require transparency in IE6, consider using a solution like SuperSleight to fix any compatibility issues.

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

Issue with URL routing causing page to display incorrectly

When using the normal Href, the page is rendered properly, but the URL is not hidden: <asp:Repeater ID="rCompany" runat="server" DataSourceID="sdsCompany" > <ItemTemplate> <div class="col4" id="trip_third"> <a href="discover_detail.as ...

c#htmlasp.neturl-routing

What Is Preventing Fields from Being Filled in the Drop-Down Menu?

Looking to achieve this outcome: https://jsfiddle.net/nstruth/t0dopzav/1/ The issue I'm facing is that the HTML appears correctly when Volvo is selected, but the JavaScript is not functioning as expected. Despite reviewing similar innerHTML JavaScrip ...

javascripthtmljquerycssjquery-select2

Issue with borders not displaying on cards in Bootstrap 3.4.0

In the 3.4.0 version of Bootstrap, I am facing an issue where cards are not showing borders. I am attempting to include multiple cards within a panel. I have tried using the "!important" property for the border, as well as using classes like "border-prima ...

htmlcsstwitter-bootstrap-3

What is the best way to incorporate a search feature within Bootstrap cards?

I've been struggling to incorporate a search feature within my bootstrap cards. Despite trying various online methods, none have proven successful for me so far. Below is my HTML code - any assistance in implementing a search filter into my app would ...

javascriptpythonhtmlcss

Utilize TypoScript to inject HeaderData prior to implementing Style Definitions

My goal is to include my Google Tag Manager script before the style definitions in order to optimize the loading order and prioritize font-family rendering. Currently, I achieve this by: page.includeCSS { file1 = fileadmin/templates/css/bootstrap.css page. ...

cssgoogle-tag-managertyposcripttypo3-11.x

Implement automatic data replacement using PHP and MySQL triggers

The code provided below pertains to postar.php file include "conexao.php"; $consulta = mysqli_query($conexao, "SELECT titus.titus, titus.des, titus.link from titus"); while($postagem = mysqli_fetch_object($consulta)); echo "<d ...

phphtmlmysql

The line breaks in elements occur when the combined widths add up to 100%

Is there a way to display an input and a button inline, with the input taking up 70% of the row and the button taking up 30%? I tried setting the CSS for the input to 70% and the button to 30%, but they keep breaking onto separate lines. How can I solve ...

css

Enhancing spacing in Bootstrap 5 with additional spacers

Looking to enhance the spacers in Bootstrap 5 by incorporating it into Sass and customizing the variables. I'm aiming to avoid redundantly defining Bootstrap's spacer options, which are as follows: $spacers: ( 0: 0, 1: $spacer * .25, 2: $s ...

htmlcsssassbootstrap-5

Is server-side validation of HTML form inputs using a lengthy sequence of if / else statements an effective approach?

Would it be practical to rely on a lengthy series of nested if/else statements in PHP for validating user input from an HTML form? For instance, when dealing with two fields, the approach might look like this: if (field one is correctly formatted) { ...

phphtmlformsinput

Getting the most out of setInterval() - a guide in jQuery

I am currently working on an auto slide feature and could use some guidance with setInterval(). From my understanding, setInterval() is used to repeat functions infinitely, which is exactly what I need for this project. Here is the current layout: HTML & ...

javascriptjqueryhtmlcss

Is it necessary to download and install plotly if I am using the cdn in my HTML file?

I'm currently developing an online application using Flask. The user input is collected with d3.js and sent to app.py, where it is used for an API call to retrieve the necessary data. This data is then returned in JSON format to JavaScript for renderi ...

javascriptpythonhtmlflask

Avoiding Page Reloads with Ajax while Removing Entries from a Table in Laravel

I am encountering an issue where I can click the button, but it requires a refresh to execute the delete action. Is there something in my ajax code causing this problem and why is it refreshing? I want the button to instantly delete without the need for a ...

phphtmlajaxlaraveleloquent

What is the process for adjusting the border color of my button?

Is there a way to change the blue outline color to #D5A021 instead of blue when the button is clicked by the user? I believe it might be related to the btn-primary class HTML <a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Fin ...

htmlcssbootstrap-4

Positioning pop-up windows using Javascript and CSS techniques

In my web application, there is a search field that allows users to enter tags for searching. The window should pop up directly below the search field as shown in this image: Image I am trying to figure out how the window positioning is actually d ...

javascriptcsshtmlpopup

Limiting zero is ineffective when it comes to pop-up issues

Hey there, I'm looking to prevent users from inputting zero and dot in a specific field, which is currently working fine. However, when the field is within a pop-up, the code below doesn't seem to work. <script> $('#name').keyp ...

javascriptjqueryhtmlcss

What steps should be taken to create a two-column table from a given list of items?

I am trying to display a list of words in two columns, one word after another from left to right. Here is the desired table structure: <table id="wordTable"> <tr> <td>ac </td> <td>bd </td> </tr> ...

javascripthtml

Assess JavaScript for Fetch API implementation

Currently, I am utilizing node.js on Windows with the express module to create an HTML page where I need to retrieve data from a server-side function called getfiledata() (I want to keep my Javascript and text file private). I have attempted to use fetch( ...

javascripthtmlnode.jspromisefetch

Customizing Ngx-bootstrap Carousel Indicator, Previous, and Next Button Styles

<carousel > <a href=""> <slide *ngFor="let slide of slides"> <img src="{{slide.imgUrl}}" alt="" style="display: block; width: 100%;"> </slide> 1. Is there a way to substitute the indicators with images ...

htmlcssbootstrap-4angular6ngx-bootstrap

Alignment Troubles with Icons

I am having trouble positioning some icons on the far right of my 960 grid template header, next to my logo which is on the far left. I have tried multiple ways but can't seem to get it right. Any assistance would be greatly appreciated. Below is the ...

htmlcss960.gs

Prevent Previous/Next Buttons, Autofill, and Completion Bar on iPhone Web Forms

Can the bar on web forms that includes the (Previous|Next) Autofill and Done button be disabled or suppressed? I know there are solutions for native apps, but I am specifically working on a web app. I'm wondering if there is a simple attribute to add ...

iphonehtml