Why isn't jQuery toggle working to toggle, and how can I fix my background

Hello everyone, I am new and just created this page. Unfortunately, I'm facing two issues - I don't want my background to repeat and my jQuery toggle isn't working :(

I have included a snippet of my code below. Can someone please guide me on what changes need to be made for it to work properly?

body {
    background: url("http://dash.ga.co/assets/anna-bg.png");
    background-size: cover;
    background-position: center;
}
.first {
    background: #000;
    background-image: url("http://buddies.koinup.com/group-637.png");
    background-size: cover;
    background-position: center;
    width: 200px;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    border: 1px solid #000;
    border-radius: 10px;

}
p {
    color: rgba(255,255,255,1);
    background: black;
    background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
    background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
    padding: 10px;
    line-height: 28px;
    text-align: justify;
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 3px 65px 3px 64px;
    height: 30px;
    border-radius: 0px 0px 8px 8px;
    transition: height .5s;
    -webkit-transition: height .5s;
    -moz-transition: height .5s;
}

Answer №1

To provide some context:

body {
    background-repeat: no-repeat;
}

In terms of jQuery: Ensure that you have imported the library correctly. The code itself is functioning as expected. Feel free to check out the updated JSFiddle here: http://jsfiddle.net/rb92ahpf/1/

Answer №2

Just follow these steps

background: url("http://dash.ga.co/assets/anna-bg.png") no-repeat; 

instead of

background: url("http://dash.ga.co/assets/anna-bg.png");

This change is necessary because there is an absence of an element in the inner body. The div.first is set to position absolute, resulting in the body having reduced height.

If desired, you can implement it like this:

<body>
  <div style="min-height:600px;display:block;">
    <div class="first">

Answer №3

body { 
    background: url(http://website.com/assets/background-image.png) no-repeat center center fixed;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

It's important to set the body CSS like this for everything to work correctly :)

http://jsfiddle.net/UniqueUser/randomurl/

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

Guide to utilizing an Ajax response object

Here is the code I am using to display data based on values selected from dropdowns: $("#botao-filtrar").click(function(){ $(".mask-loading").fadeToggle(1000); $.ajax({ url: 'datacenter/functions/filtraDashboardGeral.php', as ...

Tips for keeping an image stationary when hovering over it

I'm in need of some assistance. Despite my best efforts, I have been unable to achieve the desired outcome. I am looking to create a scenario where an image remains in place even when the mouse hovers over it. Essentially, I want the image to stay vis ...

The input element captures the exact x and y coordinates of where the mouse was clicked

I have a requirement to submit a page, and I have opted to utilize the <input> element for this purpose with an image that zooms slightly when hovered over. Due to the unusual nature of my query, I was unable to find any relevant information about t ...

Tips for Organizing a Vast Array of Repetitive "Nth-Of-Type" CSS Selectors

Imagine an array of vibrant highlights, all controlled through CSS. Is there a way to condense this extensive block of CSS code while achieving the same result? In simpler terms, is it possible to reduce the repetition in the code by using only CSS when ...

Expand the background of columns to cover grid gutters

Imagine this... You're working on a layout with three columns, all within a fixed-sized container that is centered using margin:0 auto. The design requires the first column to have a background color that reaches the left edge of the browser window. ...

Transfer the array using Ajax to a PHP script

I have an array generated using the .push function that contains a large amount of data. What is the most effective way to send this data to a PHP script? dataString = ??? ; // Is it an array? $.ajax({ type: "POST", url: "script.php" ...

Error: Uncaught TypeError in Ajax function definition

I encountered an error in my code that says: Uncaught TypeError: Cannot read property 'toLowerCase' of undefined The interesting thing is, when I remove the following part from my source file: delay(function(){ ... }, 1000); the code works ...

What is the solution to the error message stating that <tr> cannot be a child of <div>?

displayTodos() { return this.state.todos.map(function(item, index){ return <div todo={item} key = {index}>; <tr> <td>{item.todo_description}</td> <td>{item.todo_responsible}</td> ...

Why does tagging P trigger popups in the DIV when the DIV contains another DIV?

JSBIN HTML <p> <div>123</div> </p> CSS p div{ background:#f00; } Encountering an odd issue here. When I input the HTML structure as shown below: <p></p><div>123</div> The CSS code fails to produce ...

How can I modify the # symbol with .htaccess?

When someone accesses the following URL: www.facebook.com/index.php#sk=inbox The .htaccess file will redirect it to the server as: www.facebook.com/index.php?sk=inbox This allows me to retrieve the value of sk using PHP like this: *echo $_GET[&a ...

Gridview displaying varying border styles in CSS

I'm really struggling with this issue. I have a GridView and I want to ensure that the borders are consistent across all browsers. Right now, I'm experiencing different outcomes in IE, FF, and Chrome. Despite my best efforts with CSS (I'm re ...

Using ReactJS to strip HTML tags from JSON response

I'm having trouble figuring out how to strip HTML tags from a JSON response in reactjs. Here's the JSON response: { "price": "26,800.98", "diff": "<!--daily_changing-->+13.44 (+0.05%)&nbsp;& ...

How to address hover problems in D3.js when dealing with Path elements and updating tooltip information after brushing the focus

Seeking assistance with a Multi Series, Focus + Context D3 chart and hoping to address my main queries all at once. The questions that need resolving are: How can I prevent the tooltips I've generated from being affected by the hair-line (which t ...

Making a jQuery post request that returns JSON data

Is it possible to use the jQuery $.ajax method for making a POST request and sending data (e.g. page.aspx?var1=value) while also specifying that the expected response from the service will be in JSON format? var data = {name: _name, ...}; var request = $ ...

Tips for maximizing responsiveness with display:flex in Bootstrap?

I have a row with 3-cols containing a dropdown menu within each column. The dropdown menu appears below when an option is selected. Clicking the option button causes the height of the columns to extend, flex, or increase as intended. To achieve this effec ...

Is your JavaScript function failing to execute properly?

Within my script, I have defined two JavaScript functions: myFunction() and submitForm(). <script> var intervalID = 0; function myFunction(interval) { if(interval == 1) { if(intervalID != 0) { window.clearInterval(intervalID); in ...

Tips for sending multiple values in a data object using jQuery AJAX

I am currently working on a form that contains two input fields, with the possibility of more being added later. The first input is a text field and the second is a checkbox. I want to be able to send these inputs using $.ajax. To accomplish this, I have ...

utilizing a dynamic value within CSS modules for class naming

Struggling to incorporate a variable into a CSS module class name in Next.js. Finding it challenging to determine the correct syntax. The variable is fetched from the API: const type = red Here's how I'm attempting to achieve it: <div clas ...

You can move freely between classes A and B, as well as classes A and C, but there is no transition allowed between

A Brief Overview... Take a look at the HTML structure below: <div class="wrapper"> <div class="item above"></div> <div class="item active"></div> <div class="item below"></div> <div class="item ...

Can you explain the function of mdLiveAnnouncer in Angular Material and how it operates?

Could someone provide an explanation of $mdLiveAnnouncer using this code snippet? module.controller('AppCtrl', function($mdLiveAnnouncer) { // Making a basic announcement (Polite Mode) $mdLiveAnnouncer.announce('Hey Google'); // ...